<template>
  <div class="app-container">
      <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template #title>
                <div style="font-size: 15px;font-weight: 400;color: #333;"><span>条件查询</span></div>
            </template>
            <template #icon="{ isActive }">
              <div class="icon-ele">{{ isActive ? '展开' : '折叠' }}</div>
            </template>
            <div class="top-main">
              <el-form class="top-form-fl" :model="param" :inline="true" label-width="auto">
                <el-form-item label="箱号">
                  <MultipleBoxNumbersDialog v-model.trim="param.containerNo"/>
                </el-form-item>
                <el-form-item label="箱型">
                  <el-select v-model="param.boxType" clearable style="width:100%" placeholder="请选择">
                    <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="箱况">
                  <el-select v-model="param.boxCondition" clearable style="width:100%" placeholder="请选择">
                    <el-option v-for="item in param.boxCaseOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="实时位置">
                  <!-- <div>实时位置</div>
                  <yardSelect :selectName="'yardName'" :yardName="param.yardName" :other="'addOpt'" :needInfo="true" @yardId="yardChange"
                    style="width:100%" :placeholder="'请输入'">
                  </yardSelect> -->
                  <MultipleBoxNumbersDialog v-model.trim="param.locations" :multipleBoxInfo="customBoxInfo"/>

                </el-form-item>
                <el-form-item  label="进场日期">
                  <el-date-picker v-model="param.inDate" clearable type="daterange" range-separator="~" start-placeholder="开始日期"
                    end-placeholder="结束日期" />
                </el-form-item>
                <el-form-item label="离场日期">
                  <el-date-picker v-model="param.outDate" clearable type="daterange" range-separator="~" start-placeholder="开始日期"
                    end-placeholder="结束日期" />
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="param.statusList" multiple clearable placeholder="请选择">
                    <el-option
                        v-for="item in param.statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  label="集装箱公司">
                  <el-input v-model.trim="param.outBoxCompanyName" placeholder="请输入集装箱公司" clearable></el-input>
                </el-form-item>
                <el-form-item label="客户">
                  <el-input v-model.trim="param.agentName" placeholder="请输入客户" clearable></el-input>
                </el-form-item>
                <el-form-item label="提箱城市">
                  <city-select v-model="param.carryCity" :cityList="param.carryCityList" :needInfo="true" style="width:100%"
                    @cityId="carryCityChange" />
                </el-form-item>
                <el-form-item label="还箱城市">
                  <city-select v-model="param.backCity" :cityList="param.cityList" :needInfo="true" style="width:100%"
                    @cityId="backCityChange" />
                </el-form-item>
                <el-form-item label="业务类型">
                  <el-select v-model="param.orderType" clearable style="width:100%" placeholder="请选择">
                    <el-option v-for="item in param.orderTypeList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="箱标">
                  <el-select v-model="param.totalWeight" clearable style="width:100%" placeholder="请选择">
                    <el-option v-for="item in basicConfig.totalWeight" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div class="top-from-fr">
                  <el-button class="top-Search" @click="getTableData" type="primary">查询</el-button>
                  <el-button class="top-Refresh" @click="handleReSet">重置</el-button>
              </div>
            </div>
          </el-collapse-item>
      </el-collapse>
      <cz-tages :bottomLine="true" :typeList="typeList" @handleTypeChange="handleTypeChange" style="float: left;"></cz-tages>
      <span style="margin-top: -28px;float: right;">
        <!-- <el-icon><Finished /></el-icon> -->
        <!-- <el-button :icon="Grid" size="small" plain class="operatingArea"></el-button> -->
        <el-dropdown placement="top" :hide-on-click="false" class="operatingArea">
          <el-button :icon="Grid" type="primary" size="small">自定义显示列</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <div class="mt-2">
                  <el-checkbox-group v-model="showTableItem" @change="handleGroupChange" :min="5" class="checkbox-grid">
                      <el-checkbox v-for="(item,index) in filterTbaleItem" :key="index" :label="item.label" :value="item.value" size="small" />
                  </el-checkbox-group>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-tooltip effect="dark" content="此按钮可选择当前页及后续页所有集装箱" placement="left">
          <template v-if="isSelectAll">
            <el-button :icon="Finished" size="small" @click="slectAll" plain class="operatingArea">全选</el-button>
          </template>
          <template v-else>
              <el-button size="small" @click="deselectAll" plain class="operatingArea">取消全选</el-button>
          </template>
        </el-tooltip>
        <el-button :icon="Upload" size="small" @click="batchPicking" plain class="operatingArea">提箱</el-button>
        <el-button :icon="Sort"  size="small" @click="handleOperateBox('huanXiang')" plain class="operatingArea">还箱</el-button>
        <!-- <el-button :icon="Menu" size="small" plain> -->
          <el-dropdown placement="top"  class="operatingArea">
            <el-button :icon="Menu" size="small"> 批量操作</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleUpload">导入</el-dropdown-item>
                <el-dropdown-item @click="toExportContainer">导出</el-dropdown-item>
                <el-dropdown-item @click="activDelete($event, 'pitch')">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        <!-- </el-button> -->
        <el-dropdown placement="top" class="operatingArea">
            <el-button :icon="Switch" size="small">代管操作</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goManage">转代管</el-dropdown-item>
                <el-dropdown-item @click="endManage">结束代管</el-dropdown-item>
              </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-button :icon="Plus" size="small" @click="handleAdd" plain class="operatingArea">添加</el-button>
        <!-- <el-button :icon="Delete" type="primary" size="small" @click="activDelete($event, 'pitch')" plain>批量删除</el-button> -->
      </span>

      <Table ref="tableRef" v-bind="table" :allId="allId" :isAllCheck="isAllCheck" style="width: 100%;" @sortChange="sortChange" @pageChange="onTablePageChange" @activEdit="activEdit"
        @activeRemark="activeRemark" @selectionChange="selectionChange" @additionalFee="additionalFee" @activDelete="activDelete" @showInfo="showInfo" @showPath="showPath" @attachFile="attachFile" @viewAttach="viewAttach" @updateSelectAll="updateSelectAll"  :disableHeaderCheckbox="disableHeaderCheckbox">
      </Table>

      <!-- 添加集装箱  -->
      <el-dialog v-model="param.dialogTableVisible" style="width: 1100px;">
        <span class="_before">{{param.title}}</span>
        <el-form ref="addFormRef" :model="form" :label-position="'right'" label-width="auto"  :rules="addFormRules" inline class="form-inline">
          <el-form-item label="箱号" prop="containerNo">
            <div class="line-content"> 
                <el-input v-model.trim="form.containerNo" clearable />
            </div>
          </el-form-item>
          <el-form-item label="箱型" prop="boxType">
            <div class="line-content"> 
                <el-select v-model="form.boxType" style="width:100%" placeholder="请选择">
                  <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
          </el-form-item>
          <el-form-item label="箱况" prop="boxCondition">
            <div class="line-content"> 
              <el-select v-model="form.boxCondition" style="width:100%" placeholder="请选择">
                <el-option v-for="item in param.boxCaseOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="箱标" prop="totalWeight">
            <div class="line-content"> 
              <el-select v-model="form.totalWeight" style="width:100%" placeholder="请选择">
                <el-option v-for="item in basicConfig.totalWeight" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>

          <el-form-item v-if="form.location != '1'" label="进场日期" prop="inDate">
              <div class="line-content"> 
                <el-date-picker v-model="form.inDate" @change="dateChange('duiChang')" type="date" style="width:100%" />
              </div>
          </el-form-item>
          <el-form-item label="实时位置" prop="location">
              <div class="line-content"> 
                <yardSelect ref="selectRef" v-model="form.location" @yardId="yardInfo" :selectName="'yardName'" :needInfo="true" :other="'addOpt'" style="width:100%"></yardSelect>
              </div>
          </el-form-item>
          <el-form-item v-if="form.location != '1'" label="堆存天数" prop="inDays">
              <div class="line-content"> 
                <el-input v-model.trim="form.inDays" disabled>
                  <template #suffix>天 </template>
                </el-input>
              </div>
          </el-form-item>
          <el-form-item v-if="form.location == '1'" label="箱使期" prop="boxUsagePeriod" >
            <div class="line-content"> 
                <el-input v-model.trim="form.boxUsagePeriod">
                  <template #suffix> 天 </template>
                </el-input>
              </div>
          </el-form-item>
          <el-form-item v-if="form.location == '1'" label="超期1天后" prop="overdueFeeDay">
            <div class="line-content"> 
                <el-input v-model.trim="form.overdueFeeDay" maxlength="5">
                  <template #suffix>$/箱/天 </template>
                </el-input>
              </div>
          </el-form-item>
          <el-form-item v-if="form.location == '1'" label="提箱城市" prop="carryCity">
            <div class="line-content"> 
              <!-- <city-select v-model="form.carryCity" :cityList="form.carryCityList" :needInfo="true" style="width:100%" @cityId="carryCityId" /> -->
              <SelectCity :selectCityId="form.carryCity"  :inChina="nationalTypeTx" :config="batchCity.config" @cityId="carryCityId" class="elInput"></SelectCity>
            </div>
          </el-form-item>
          <el-form-item v-if="form.location == '1'" label="还箱城市" prop="backCity">
            <div class="line-content"> 
              <!-- <city-select v-model="form.backCity" :cityList="form.cityList" :needInfo="true" style="width:100%" @cityId="backCityId" /> -->
              <SelectCity :selectCityId="form.backCity" :inChina="nationalTypeHx" :config="batchCity.config" @cityId="backCityId" class="elInput"></SelectCity>
            </div>
          </el-form-item>
          <el-form-item label="状态" prop="status">
              <div class="line-content">
                <b style="padding-left: 0px;">{{ form.location == '1' ? "外加" : "堆存中" }}</b>
              </div>
          </el-form-item>
          
          <el-form-item v-if="form.location == '1'" label="离场日期" prop="outDate">
              <div class="line-content"> 
                <el-date-picker v-model="form.outDate" @change="dateChange('zaiTu')" type="date" :disabled-date="disabledDatezaiTu" style="width:100%" />
              </div>
          </el-form-item>
          <el-form-item v-if="form.location == '1'" label="离场天数" prop="outDays">
              <div class="line-content"> 
                <el-input v-model.trim="form.outDays" disabled />
              </div>
          </el-form-item>
          <el-form-item label="箱源" prop="containerClassify">
              <div class="line-content"> 
                <el-select v-model="form.containerClassify">
                    <el-option label="自有箱" value="5"></el-option>
                    <el-option v-if="form.location == '1'" label="外调箱" value="15"></el-option>
                    <el-option label="代管箱" value="10"></el-option>
                </el-select>
              </div>
          </el-form-item>
          <el-form-item v-if="form.containerClassify != '5'" label="集装箱公司" prop="outBoxCompanyName">
              <div class="line-content"> 
                <el-input v-model.trim="form.outBoxCompanyName" />
              </div>
          </el-form-item>
          <el-form-item v-if="form.location == '1'" label="客户" prop="agentName">
              <div class="line-content"> 
                <el-input v-model.trim="form.agentName"  />
              </div>
          </el-form-item>
          <el-form-item label="附件" >
              <div class="line-content" style="width: 720px;"> 
                <uploadFile ref="addBoxFileRef" v-if="param.dialogTableVisible" :type="'jpg/png/jpeg'" :displayType="3" :limit="10" :purpose="'upload'" :drag="true"></uploadFile>
              </div>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
              <div class="line-content" style="width: 720px;"> 
                <el-input v-model.trim="form.remark" type="textarea" clearable show-word-limit maxlength="500" rows="2"/>
              </div>
          </el-form-item>
          <el-row justify="center">
            <el-col :span="3"> <el-button style="width:100px;" @click="restData">重置</el-button></el-col>
            <el-col :span="3"> <el-button type="primary" style="width:100px;" @click="handleSaveAdd">确认</el-button></el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 批量导入-->
      <el-dialog v-model="param.dialogPitchUploadVisible" :modal="false" style="width: 400px;">
        <span class="_before">集装箱导入</span>
        <div class="text-right" style="margin: 10px 0 20px 0;">
          <el-button type="primary" link>
            <el-icon><Download /></el-icon>
            <a href="http://192.168.1.253:9000/default/template/%E9%9B%86%E8%A3%85%E7%AE%B1%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx">下载模板</a>
          </el-button>
        </div>
        <uploadFile ref="uploadFileRef" :type="'xls/xlsx'" :displayType="1" :purpose="'import'" :use="'container'" :drag="true" @uploadSuccess="uploadSuccess" @excelUploadError="excelUploadError"></uploadFile>

      </el-dialog>
      <!-- info -->
      <el-dialog v-model="param.dialogInfoVisible" style="width: 1000px;">
        <box-info :boxInfo="param.boxInfo"></box-info>
      </el-dialog>
      <!-- edit 编辑集装箱-->
      <el-dialog v-model="param.dialogEditVisible" style="width: 1100px;box-sizing:border-box;padding:20px;">
        <span class="_before">编辑集装箱</span>
        <el-form ref="editFrom" :model="editContainer" :inline="true" :label-position="'right'" label-width="auto" :rules="editContainerRuler" class="form-inline editDataInfo">
          <el-form-item label="箱号" prop="containerNo">
            <template v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25' || editContainer.status =='40' || editContainer.status =='45'"> <div class="line-content">{{editContainer.containerNo}}</div></template>
            <template v-else>
              <div class="line-content elRow">
                <el-input v-model.trim="editContainer.containerNo" placeholder="请输入"></el-input>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="原箱号" prop="oidContainerNo" v-if="editContainer.oidContainerNo">
            <div class="line-content">{{editContainer.oidContainerNo}}</div>
          </el-form-item>
          <el-form-item label="箱型" prop="boxType">
            <div class="line-content">{{basicConfig.boxTypeInfo1[editContainer.boxType] || "--"}}</div>
          </el-form-item>
          <el-form-item label="实时位置" prop="location">
            <div v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25' || editContainer.status =='35' || editContainer.status =='40' || editContainer.status =='45'" class="line-content">{{editContainer.location}}</div>
            <div v-else class="line-content elRow">
              <SelectYard :selectYardName="editContainer.location" :reqType="'yardName'" :config="editContainerConfig" @yardId="editContainerCityId" style="width:100%"></SelectYard>
            </div>
          </el-form-item>
          <el-form-item v-if="editContainer.status =='15'|| editContainer.status =='20' || editContainer.status =='25' || editContainer.status =='35'" label="箱使期(天)" prop="boxUsagePeriod">
            <template v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25'">
              <div class="line-content">{{editContainer.boxUsagePeriod}}</div>
            </template>
            <template v-else>
              <div class="line-content elRow">
                <el-input v-model.trim="editContainer.boxUsagePeriod" placeholder="请输入" maxlength="5"></el-input>
              </div>
            </template>
          </el-form-item>
          <el-form-item v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25' || editContainer.status =='35'" label="提箱城市" prop="carryCityId">
            <div class="line-content">
              <template v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25'">
                <SelectCity :selectCityId="editContainer.carryCityId" :index="0" :config="{disabled:true}" class="elInput"></SelectCity> 
              </template>
              <template v-else>
                  <template v-if="editContainer.containerClassify == '5'" >
                      <SelectCity :selectCityId="editContainer.carryCityId" :index="0" :config="{disabled:true}" class="elInput"></SelectCity>  
                  </template>
                  <template v-else>
                      <SelectCity :selectCityId="editContainer.carryCityId" :index="0" :config="{}" @cityId="editCarryCityId" class="elInput"></SelectCity>  
                  </template>
              </template>
            </div>
          </el-form-item>
          <el-form-item v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25' || editContainer.status =='35'" label="超期1天后($)" prop="overdueFeeDay">
              <template v-if="editContainer.status =='15'|| editContainer.status =='20' || editContainer.status =='25'">
                <div class="line-content">{{editContainer.overdueFeeDay}}箱/天</div>
              </template>
              <template v-else>
                <div class="line-content elRow">
                  <el-input v-model.trim="editContainer.overdueFeeDay" maxlength="5" placeholder="请输入">
                      <template #suffix><span>箱/天</span></template>
                  </el-input>
                </div>
              </template>
          </el-form-item>
          <el-form-item v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25' || editContainer.status =='35'" label="还箱城市" prop="returnCityId">
            <div class="line-content">
              <template v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25'"> {{editContainer.returnCityName}}</template>
              <template v-else>
                <SelectCity :selectCityId="editContainer.returnCityId" :index="0" :config="{}" @cityId="editReturnCityId" class="elInput"></SelectCity>  
              </template>
            </div>
          </el-form-item>
          <el-form-item v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25' || editContainer.status =='35'" label="离场日期" prop="outDate">
            <div class="line-content">
              <template v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25'">{{formatDate(editContainer.outDate,2)}}</template>
              <template v-else>
                <el-date-picker v-model="editContainer.outDate" type="date" style="width: 100%;border: 1px solid #ddd;border-radius: 3px;" placeholder="请选择日期" clearable :disabled-date="isFutureDate"/>
              </template>
              </div>
          </el-form-item>
          <el-form-item v-if="editContainer.status !='15' && editContainer.status !='20' && editContainer.status !='25' && editContainer.status !='35'" label="进场日期" prop="inDate">
            <div class="line-content">
              <template v-if="editContainer.status =='40' || editContainer.status =='45'">{{formatDate(editContainer.inDate,2)}}</template>
              <el-date-picker v-else v-model="editContainer.inDate" type="date" style="width: 100%;border: 1px solid #ddd;border-radius: 3px;" placeholder="请选择日期" clearable :disabled-date="isFutureDate"/>
            </div>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <div class="line-content">
              <el-row>
                <el-col :span="8" align="middle" class="text-left">{{basicConfig.containerStatus[editContainer.status]}}</el-col>
                <el-col :span="13" align="middle" v-if="editContainer.status !='40' && editContainer.status !='45'">
                  <template v-if="editContainer.status =='15'|| editContainer.status =='20' || editContainer.status =='25'">
                      <el-button type="primary" round size="small" style="float: left;margin: 5px 0 0 0;" @click="sellBoxes(editContainer.id)">卖出</el-button>
                      <template  v-if="editContainer.containerClassify !='5'">
                        <el-button type="primary" round size="small" style="float: right;margin: 5px 0 0 0;;" @click="buyBox(editContainer.id)">买入</el-button>
                      </template>
                  </template>
                  <template v-else>
                      <template v-if="editContainer.containerClassify =='5' || editContainer.containerClassify =='10'" >
                          <el-button type="primary" round size="small" style="float: left;margin: 5px 0 0 0;" @click="sellBoxes(editContainer.id)">卖出</el-button>
                      </template>
                      <template v-if="editContainer.containerClassify =='10' || editContainer.containerClassify =='15'" >
                          <el-button type="primary" round size="small" style="float: right;margin: 5px 0 0 0;;" @click="buyBox(editContainer.id)">买入</el-button>
                      </template>
                  </template>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
          <el-form-item label="离场天数" prop="outDays">
            <div class="line-content">{{editContainer.outDays}}</div>
          </el-form-item>
          <el-form-item label="箱源" prop="containerClassify">
            <div class="line-content">{{{5:"自有",10:"代管",15:"外调"}[editContainer.containerClassify]}}</div>
          </el-form-item>
          <el-form-item label="箱况" prop="boxCondition">
            <template  v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25'">
              <div class="line-content">{{basicConfig.boxConditionInfo2[editContainer.boxCondition]}}</div>
            </template>
            <template v-else>
              <div class="line-content" v-if="editContainer.status =='15' || editContainer.status =='40' || editContainer.status =='45'">{{basicConfig.boxConditionInfo2[editContainer.boxCondition]}}</div>
              <div class="line-content elRow" v-else>
                <el-select v-model="editContainer.boxCondition">
                  <el-option v-for="item in basicConfig.boxConditionInfo1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="箱标" prop="totalWeight">
            <template v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25'">
              <div class="line-content">{{editContainer.totalWeight}}</div>
            </template>
            <template v-else>
              <div class="line-content" v-if="editContainer.status =='40' || editContainer.status =='45'">{{editContainer.totalWeight}}</div>
              <div class="line-content elRow" v-else>
                <el-select v-model="editContainer.totalWeight">
                  <el-option v-for="item in basicConfig.totalWeight" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </template>
          </el-form-item>
          

          <!-- <el-form-item v-if="editContainer.status !='15' && editContainer.status !='20' && editContainer.status !='25'" label="客户" prop="agentName">
            <div class="line-content elRow">
              <el-input v-model.trim="editContainer.agentName" placeholder="请输入"></el-input>
            </div>
          </el-form-item> -->
          <el-form-item v-if="editContainer.status !='5' && editContainer.status !='40' && editContainer.status !='45'" label="客户" prop="agentName">
            <template v-if="editContainer.location == '在途' && editContainer.status != '35'">
              <div style="display: inline-block;" class="text-ellipsis">{{editContainer.agentName}}</div> 
            </template>
            <template v-else>
              <div class="line-content elRow">
                <el-input v-model.trim="editContainer.agentName" placeholder="请输入"></el-input>
              </div>
            </template>
          </el-form-item>

          <el-form-item v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25'" label="集装箱公司" prop="outBoxCompanyName">
            <div class="line-content">{{editContainer.outBoxCompanyName || '--'}}</div>
          </el-form-item>
          <template v-else> <!--集装箱公司-->
              <el-form-item v-if="editContainer.containerClassify == 10 || editContainer.containerClassify == 15" label="集装箱公司" prop="outBoxCompanyName">
                <div class="line-content" v-if=" editContainer.status =='45'">{{editContainer.outBoxCompanyName}}</div>
                <div class="line-content elRow" v-else>
                  <el-input v-model.trim="editContainer.outBoxCompanyName" placeholder="请输入"></el-input>
                </div>
              </el-form-item>
          </template>
          <el-form-item label="附件">
              <div class="line-content" style="width: 720px;"> 
                <uploadFile ref="editBoxFileRef" v-if="param.dialogEditVisible" :type="'jpg/png/jpeg'" :urlList="editHmentFile" :displayType="3" :limit="10" :purpose="'upload'" :drag="true"></uploadFile>
              </div>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <template v-if="editContainer.status =='15' || editContainer.status =='20' || editContainer.status =='25'"> 
                <div class="line-content" style="width: 700px;">{{editContainer.remark || "--"}}</div> 
            </template>
            <template v-else>
              <div class="line-content" style="width: 700px;" v-if="editContainer.status =='40' || editContainer.status =='45'">{{editContainer.remark || "--"}}</div>
              <div class="line-content" style="width: 700px;" v-else>
                <el-input v-model.trim="editContainer.remark" type="textarea" show-word-limit maxlength="500" rows="3" placeholder="请输入..."></el-input>
              </div>
          </template>
          </el-form-item>
        </el-form>
        <el-row justify="center" class="marginTop20">
          <el-col :span="3" v-if="editContainer.status =='15'|| editContainer.status =='20' || editContainer.status =='25' || editContainer.status =='40' || editContainer.status =='45'">
            <el-button type="primary" @click="param.dialogEditVisible=false" style="width: 100%;">保存</el-button>
          </el-col>
          <el-col :span="3" v-else><el-button type="primary" @click="handleEdit" style="width: 100%;">保存</el-button></el-col>
        </el-row>
      </el-dialog>

      <!--  流转轨迹-->
      <el-dialog v-model="param.dialogPathVisible" style="width: 80%;box-sizing:border-box;padding:20px;">
        <span class="_before"> 流转轨迹</span>
        <path-table :containerNo="param.containerNoo"></path-table>
      </el-dialog>
      <!-- 还箱 -->
      <el-dialog v-model="param.dialogBoxVisible" style="width: 400px;box-sizing: border-box;padding:20px;" @closed="handleClose">
        <span class="_before">还箱</span>
        <el-form>
          <el-form-item>
            <div> 实时位置</div>
            <SelectYard :selectYardName="containerYardYardName" v-if="param.dialogBoxVisible" :reqType="'yardName'" :config="{}" @yardId="batchContainer" style="width:100%"></SelectYard>
            <span style="font-size: 12px;color: red;">* 还箱堆场不存在？请到 我的堆场 添加后再选择。</span>
          </el-form-item>
          <el-form-item>
            <div>进场日期</div>
            <el-date-picker v-model="param.boxOutDate" :editable="false" :clearable="false" style="width:100%" :disabled-date="isFutureDate"/>
          </el-form-item>
          <el-row justify="center">
              <el-col :span="3"> <el-button type="primary" @click="handleSaveBox">保存</el-button></el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 操作栏内删除弹窗-->
      <el-dialog v-model="param.dialogVisible" width="500">
        <div class="_before">系统提示</div>
        <span style="display: block; margin: 20px 0;">确认删除？</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="param.dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleDelete">是的</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 备注 -->
      <el-dialog v-model="param.dialogVisibleRemark" :title="param.remarksTitle" width="300">
        <div style="width: 100%;text-align: center;margin-top: 20px;">
          <el-input v-model.trim="param.remarkValSync" type="textarea" show-word-limit maxlength="200" rows="2"></el-input>
        </div>
        <div style="width: 100%;text-align: center;margin-top: 40px;">
          <el-button type="primary" @click="handleRemark" plain style="width:100px">确定</el-button>
        </div>
      </el-dialog>
      <!-- 批量提箱 -->
      <el-dialog v-model="dialogBatchPicking" width="95%" @closed="handleClose">
        <span class="_before">提箱</span>
        <div class="marginTop20">
          <el-radio-group v-model="orderType" @change="orderTypeChange">
            <el-radio-button value="20">出售</el-radio-button>
            <el-radio-button value="5">租箱</el-radio-button>
            <!-- <el-radio-button value="10">进口</el-radio-button> -->
            <!-- <el-radio-button value="25">出售</el-radio-button> -->
          </el-radio-group>
          <el-dropdown placement="bottom-start" style="float: right;">
            <el-button>批量操作</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="openBusinessInfo">修改业务信息</el-dropdown-item>
                <el-dropdown-item @click="openEditData">填写费用明细</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <p style="font-size: 16px;">基本信息</p>
        <el-table :data="batchPickingData" :key="tableKey" @selection-change="batchSelectionChange" class="dialogBatchPicking">
          <el-table-column type="selection" fixed width="55" align="center"/>
          <el-table-column prop="containerNo" fixed  label="箱号" align="center" width="120"/>
          <el-table-column prop="businessNo" fixed  label="业务编号" align="center" width="120" >
            <template #default="scope">
              <el-input v-model.trim="scope.row.businessNo" class="elInput" maxlength="30" oninput="value = value.replace(/[^a-zA-Z0-9]/g, '')"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="containerClassify" fixed  label="箱源" align="center" width="80">
            <template #default="scope">{{basicConfig.containerClass[scope.row.containerClassify]}}</template>
          </el-table-column>
          <el-table-column prop="boxType" label="箱型" fixed  align="center" width="70">
            <template #default="scope">{{basicConfig.boxTypeInfo1[scope.row.boxType]}}</template>
          </el-table-column>
          <el-table-column prop="boxCondition" fixed  label="箱况" align="center" width="60">
            <template #default="scope">{{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}</template>
          </el-table-column>
          <el-table-column prop="yardName" fixed  label="堆场" align="center" width="100"/>

          <el-table-column v-if="orderType == '5' || orderType == '10'" prop="boxUsagePeriod" label="箱使期(天)"  align="center" width="90">
            <template #default="scope">
              <el-input v-model.trim="scope.row.boxUsagePeriod" class="elInput" maxlength="3" oninput="value = value.replace(/[^\d]/g, '').replace(/^0+/, '')||0"></el-input>
            </template>
          </el-table-column>
          <el-table-column v-if="orderType == '5' || orderType == '10'" prop="overdueFeeDay" label="超期1天后($/箱/天)" align="center" width="140">
            <template #default="scope">
              <el-input v-model.trim="scope.row.overdueFeeDay" class="elInput" maxlength="3" oninput="value = value.replace(/[^\d]/g, '').replace(/^0+/, '')||0"></el-input>
            </template>
          </el-table-column>
          <el-table-column v-if="orderType == '5'" prop="boxUsagePeriod" label="结算流向"  align="center" width="120">
              <template #default="scope">
                <div class="elRow">
                  <el-select v-model="scope.row.rentOutDirection">
                      <el-option label="支出" value="-1"></el-option>
                      <el-option label="收入" value="1"></el-option>
                  </el-select>
                </div>
              </template>
          </el-table-column>
          <el-table-column v-if="orderType == '5'" prop="rentInPrice" label="租入价" align="center" width="200">
            <template #default="scope">
              <el-row class="elRow">
                <el-col :span="8"> 
                  <el-select v-model="scope.row.rentInPriceCurrency">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <el-input v-model.trim="scope.row.rentInPrice" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column v-if="orderType == '10'" prop="boxLabelPrice" label="箱贴价" align="center" width="200">
            <template #default="scope">
              <el-row class="elRow">
                <el-col :span="8"> 
                  <el-select v-model="scope.row.boxLabelPriceCurrency">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <el-input v-model.trim="scope.row.boxLabelPrice" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column v-if="orderType == '20'" prop="buyInPrice" label="买入价" align="center" width="200">
            <template #default="scope">
              <el-row class="elRow">
                <el-col :span="8"> 
                  <el-select v-model="scope.row.buyInPriceCurrency">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <el-input v-model.trim="scope.row.buyInPrice" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column v-if="orderType == '5'" prop="rentOutPrice" label="租出价" align="center" width="200">
            <template #default="scope">
              <el-row class="elRow">
                <el-col :span="8"> 
                  <el-select v-model="scope.row.rentOutPriceCurrency">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <el-input v-model.trim="scope.row.rentOutPrice" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column v-if="orderType == '20'" prop="sellOutPrice" label="卖出价" align="center" width="200">
            <template #default="scope">
              <el-row class="elRow">
                <el-col :span="8"> 
                  <el-select v-model="scope.row.sellOutPriceCurrency">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <el-input v-model.trim="scope.row.sellOutPrice" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="receivableLiftingFee" label="应收吊装费" align="center" width="200">
            <template #default="scope">
                <template v-if="scope.row.containerClassify != '5'">
                  <el-row class="elRow">
                    <el-col :span="8"> 
                      <el-select v-model="scope.row.receivableLiftingFeeCurrency">
                        <el-option label="$" value="USD"></el-option>
                        <el-option label="￥" value="CNY"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="16">
                      <el-input v-model.trim="scope.row.receivableLiftingFee" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                    </el-col>
                  </el-row>
                </template>
                <template v-else>--</template>
            </template>
          </el-table-column>
          <el-table-column prop="receivableStorageFeePrice" label="应收堆存超期费单价" align="center" width="200">
            <template #default="scope">
              <template v-if="scope.row.containerClassify != '5'">
                <el-row class="elRow">
                  <el-col :span="8"> 
                    <el-select v-model="scope.row.receivableStorageFeePriceCurrency">
                      <el-option label="$" value="USD"></el-option>
                      <el-option label="￥" value="CNY"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="16">
                    <el-input v-model.trim="scope.row.receivableStorageFeePrice" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                  </el-col>
                </el-row>
              </template>
              <template v-else>--</template>
            </template>
          </el-table-column>

          <el-table-column prop="paymentLiftingFee" label="应付吊装费" align="center" width="100">
            <template #default="scope">
                <el-row class="elRow" style="border: none;" v-if="scope.row.paymentLiftingFee">
                  <el-col :span="8"> 
                    <span v-if="scope.row.paymentLiftingFeeCurrency == 'CNY'">￥</span>
                    <span v-if="scope.row.paymentLiftingFeeCurrency == 'USD'">$</span>
                  </el-col>
                  <el-col :span="16">{{scope.row.paymentLiftingFee}}</el-col>
                </el-row>
                <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="paymentStorageFeePrice" label="应付堆存超期费单价" align="center" width="150">
            <template #default="scope">
              <el-row class="elRow" style="border: none;" v-if="scope.row.paymentStorageFeePrice">
                <el-col :span="8"> 
                  <span v-if="scope.row.paymentStorageFeeCurrency == 'CNY'">￥</span>
                  <span v-if="scope.row.paymentStorageFeeCurrency == 'USD'">$</span>
                </el-col>
                <el-col :span="16">{{scope.row.paymentStorageFeePrice}}</el-col>
              </el-row>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column prop="outDate" label="离场日期" align="center" width="150">
            <template #default="scope">
              <el-date-picker v-model="scope.row.outDate" type="date" style="width: 100%;border: 1px solid #ddd;border-radius: 3px;" placeholder="请选择日期" clearable :disabled-date="isFutureDate"/>
            </template>
          </el-table-column>
          <el-table-column v-if="orderType != '20'" prop="returnCityId" label="还箱城市" align="center" width="120">
            <template #default="scope">
              <template v-if="orderType == 10"> <!--回调业务 -->
                <SelectCity :selectCityId="scope.row.returnCityId" :index="scope.$index" :inChina="1" :config="batchCity.config" @cityId="batchPickingCity" class="elInput"></SelectCity>
              </template>
              <template v-else-if="orderType == 5"> <!--出租业务 -->
                  <!-- <SelectCity :selectCityId="scope.row.returnCityId" :index="scope.$index" :inChina="0" :config="batchCity.config" @cityId="batchPickingCity" class="elInput"></SelectCity> -->
                  <SelectCity :selectCityId="scope.row.returnCityId" :index="scope.$index" :config="batchCity.config" @cityId="batchPickingCity" class="elInput"></SelectCity>
              </template>
              <template v-else>
                  <SelectCity :selectCityId="scope.row.returnCityId" :index="scope.$index" :config="batchCity.config" @cityId="batchPickingCity" class="elInput"></SelectCity>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="outBoxCompanyName" label="集装箱公司" align="center" width="120">
            <template #default="scope">
              {{scope.row.outBoxCompanyName || "--"}}
            </template>
          </el-table-column>
          <el-table-column prop="agentName" label="客户" align="center" width="200">
            <template #default="scope">
              <el-tooltip effect="dark" :content="scope.row.agentName" :disabled="!scope.row.agentName"  placement="top">
                <div @click.stop>
                  <el-input v-model="scope.row.agentName" class="elInput" @keydown.space.stop placeholder="请输入" maxlength="200" :formatter="inputText"></el-input>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center" width="250">
            <template #default="scope">
              <el-tooltip effect="dark" :content="scope.row.remark" :disabled="!scope.row.remark" placement="top">
                <div @click.stop>
                  <el-input v-model="scope.row.remark" class="elInput" @keydown.space.stop placeholder="请输入" maxlength="500" :formatter="inputText" show-word-limit></el-input>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80">
              <template #default="scope">
                <el-row >
                  <el-col :span="12"><el-icon ><EditPen @click="openEiitExtraCosts(scope.row.containerNo,'pltx')"/></el-icon></el-col>
                  <el-col :span="12"><el-icon><Delete color="#ff0000" @click="deleteItem(scope.$index)"/></el-icon></el-col>
                </el-row>
              </template>
          </el-table-column>
        </el-table>
        <el-row justify="center" class="marginTop20">
          <el-col :span="2"><el-button plain @click="dialogBatchPicking=false;getTableData()">取消</el-button></el-col>
          <el-col :span="2"><el-button type="primary" @click="submitContainerPickup(orderType)">确定</el-button></el-col>
        </el-row>
      </el-dialog>
      <el-dialog v-model="dialogEdit" width="55%" @close="cancelEditData"> <!--批量填写费用明细-->
        <span class="_before">批量填写费用明细</span>
        <el-form :inline="true" :model="editData" :label-position="'right'" ref="editDataRef" label-width="auto"  class="form-inline editDataInfo" :rules="editRuler">
            <el-form-item label="业务编号" prop="businessNo">
              <div class="line-content elRow">
                <el-input v-model.trim="editData.businessNo" placeholder="请输入"></el-input>
              </div>
            </el-form-item>
            <el-form-item v-if="orderType == '5'" label="租入价" prop="rentInPrice">
              <el-row class="line-content elRow">
                <el-col :span="7"> 
                  <el-select v-model="editData.rentInPriceCurrency" size="small">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="17">
                  <el-input v-model.trim="editData.rentInPrice"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item v-if="orderType == '5'" label="租出价" prop="rentOutPrice">
              <el-row class="line-content elRow">
                <el-col :span="7"> 
                  <el-select v-model="editData.rentOutPriceCurrency" size="small">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="17">
                  <el-input v-model.trim="editData.rentOutPrice"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item v-if="orderType == '10'" label="箱贴价" prop="boxLabelPrice">
              <el-row class="line-content elRow">
                <el-col :span="7"> 
                  <el-select v-model="editData.boxLabelPriceCurrency" size="small">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="17">
                  <el-input v-model.trim="editData.boxLabelPrice"></el-input>
                </el-col>
              </el-row>


            </el-form-item>
            <el-form-item v-if="orderType == '20'" label="买入价" prop="buyInPrice">
              <el-row class="line-content elRow">
                <el-col :span="7"> 
                  <el-select v-model="editData.buyInPriceCurrency" size="small">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="17">
                  <el-input v-model.trim="editData.buyInPrice"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item v-if="orderType == '20'" label="卖出价" prop="sellOutPrice">
              <el-row class="line-content elRow">
                <el-col :span="7"> 
                  <el-select v-model="editData.sellOutPriceCurrency" size="small">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="17">
                  <el-input v-model.trim="editData.sellOutPrice"></el-input>
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="应收吊装费" prop="receivableLiftingFee">
              <el-row class="line-content elRow">
                <el-col :span="7"> 
                  <el-select v-model="editData.receivableLiftingFeeCurrency" size="small">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="17">
                  <el-input v-model.trim="editData.receivableLiftingFee"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="应收堆存超期费单价" prop="receivableStorageFeePrice">
              <el-row class="line-content elRow">
                <el-col :span="7"> 
                  <el-select v-model="editData.receivableStorageFeePriceCurrency" size="small">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="17">
                  <el-input v-model.trim="editData.receivableStorageFeePrice"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
        </el-form>
        <el-row justify="end" class="marginTop20">
          <el-col :span="2"><el-button plain @click="restCostinfo">重置</el-button></el-col>
          <el-col :span="2"><el-button type="primary" @click="toEditData">确定</el-button></el-col>
        </el-row>
      </el-dialog>
      <el-dialog v-model="dialogBusiness" width="55%" @close="cancelEditData"> <!--批量填写业务信息-->
        <span class="_before">批量修改业务信息</span>
        <el-form :inline="true" :model="editData" :label-position="'right'" ref="editDataRef" label-width="auto" class="form-inline editDataInfo" :rules="editRuler">
            <el-form-item v-if="orderType == '5' || orderType == '10'" label="箱使期(天)" prop="boxUsagePeriod">
              <div class="line-content elRow">
                <el-input v-model.trim="editData.boxUsagePeriod" placeholder="请输入..."></el-input>
              </div>
            </el-form-item>
            <el-form-item v-if="orderType == '5' || orderType == '10'" label="超期1天后($/箱/天)" prop="overdueFeeDay">
              <div class="line-content elRow">
                <el-input v-model.trim="editData.overdueFeeDay" placeholder="请输入..."></el-input>
              </div>
            </el-form-item>
            <el-form-item label="离场日期" prop="outDate">
              <div class="line-content elRow">
                <el-date-picker v-model="editData.outDate" type="date" style="width: 100%;" placeholder="请选择日期" clearable :disabled-date="isFutureDate"/>
              </div>
            </el-form-item>
            <el-form-item v-if="orderType == '5' || orderType == '10'" label="还箱城市" prop="returnCityId">
              <div class="line-content elRow">
                <SelectCity :selectCityId="editData.returnCityId" :inChina="orderType == 10 ? '1' : '0'" :config="batchCity.config" @cityId="businessCity"></SelectCity>
              </div>
            </el-form-item>
            <el-form-item  label="客户" prop="agentName">
              <div class="line-content elRow">
                <el-input v-model.trim="editData.agentName" placeholder="请输入..."></el-input>
              </div>
            </el-form-item>
            <el-form-item  label="备注" prop="remark">
              <div class="line-content" style="width: 600px;">
                <el-input v-model.trim="editData.remark" type="textarea" show-word-limit maxlength="200" rows="3" placeholder="请输入..."></el-input>
              </div>
            </el-form-item>
        </el-form>
        <el-row justify="end" class="marginTop20"> 
          <el-col :span="2"><el-button plain @click="restBusinessInfo">重置</el-button></el-col>
          <el-col :span="2"><el-button type="primary" @click="toEditBusiness">确定</el-button></el-col>
        </el-row>
      </el-dialog>
      <el-dialog v-model="dialogExtraCosts"  width="55%"><!--编辑额外费用  /  结束代管 修改额外费用-->
        <span class="_before">编辑额外费用</span>
        <el-row align="center">
          <el-col :span="12"><h3>箱号：{{otherFeeList[0]?.containerNo}}</h3></el-col>
          <el-col :span="12" v-if="isEscrow == 'bjzyx'"><h3>业务编号：<el-input v-model="zyxbusinessNo" style="width: 50%;" clearable></el-input></h3></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col :span="5" style="height: 40px;line-height: 40px;font-weight: 550;font-size: 16px;">额外费用币种:</el-col>
              <el-col :span="16">
                <el-radio-group v-model="extraCostsFeeCurrency" @change="extraCostsCurrency" style="height: 40px;line-height: 40px;">
                  <el-radio value="USD" size="large">美元($)</el-radio>
                  <el-radio value="CNY" size="large">人民币(¥)</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </el-col>
          <el-col :offset="10" :span="2"><el-button @click="addItemExtraCosts">添加</el-button></el-col>
        </el-row>
        <el-row class="otherFeeList marginTop10">
          <el-col :span="4" class="feeListHeader">额外费用明细</el-col>
          <el-col :span="5" class="feeListHeader">金额</el-col>
          <el-col :span="5" class="feeListHeader">结算流向</el-col>
          <el-col :span="10" class="feeListHeader">结算单位</el-col>
          <template v-for="(item,index) in otherFeeList" :key="index">
            <el-col :span="4" class="feeListContent">
              <el-select v-model="item.feeCode" style="width:60%;">
                <el-option label="修箱费" value="5"></el-option>
                <el-option label="提箱费" value="10"></el-option>
                <el-option label="翻箱费" value="15"></el-option>
                <el-option label="其它费用" value="20"></el-option>
              </el-select>
            </el-col>
            <el-col :span="5" class="feeListContent">
              <el-input v-model.trim="item.feeAmount" style="width:60%;" :formatter="formatterNumber" :parser="formatterNumber">
                <template #prefix>
                  <span>{{ { USD: '$', CNY: '￥' }[item.feeCurrency] }}</span>
                </template>
              </el-input>
            </el-col>
            <el-col :span="5" class="feeListContent">
              <el-select v-model="item.feeDirection" style="width:60%;">
                <el-option label="应收" value="1"></el-option>
                <el-option label="应付" value="-1"></el-option>
              </el-select>
            </el-col>
            <el-col :span="10" class="feeListContent elSelect">
              <el-input v-model.trim="item.feeCompanyName"  style="width:90%" maxlength="200" :formatter="inputText">
                <template #prefix>
                  <el-select v-model="item.feeFlag" style="width: 100px;">
                    <el-option label="客户" value="5"></el-option>
                    <el-option label="堆场" value="10"></el-option>
                    <el-option label="第三方" value="15"></el-option>
                  </el-select>
                </template>
              </el-input> 
              <span v-if="otherFeeList.length > 1" style="text-align: center; width: 10%; display: inline-block;">
                <el-icon><Delete color="#ff0000" @click="deleteItemExtraCosts(index)"/></el-icon>
              </span>
            </el-col>
          </template>
        </el-row>
        <el-row justify="end" class="marginTop20">
          <el-col :span="3"><el-button plain @click="restOtherFeeList">重置</el-button></el-col>
          <el-col :span="3"><el-button type="primary" plain @click="submitOtherFeeList">确定</el-button></el-col>
        </el-row>
      </el-dialog>
      <el-dialog v-model="dialogEscrow" width="95%">  <!-- 批量结束代管 -->
        <span class="_before">结束代管</span>
        <el-dropdown placement="bottom-start" style="float: right;margin: 20px 30px 20px 0;">
            <el-button>批量操作</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                  <el-dropdown-item @click="openEscrowfeesdialog">填写费用明细</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        <el-table :data="custodyBox" :key="tableKey" @selection-change="escrowSelectionChange" class="dialogBatchPicking">
          <el-table-column type="selection" fixed width="55" align="center"/>
          <el-table-column prop="containerNo" fixed  label="箱号" align="center" width="120"/>
          <el-table-column prop="containerClassify" fixed  label="箱源" align="center" width="60">
            <template #default="scope">{{basicConfig.containerClass[scope.row.containerClassify]}}</template>
          </el-table-column>
          <el-table-column prop="boxType" label="箱型" fixed  align="center" width="70">
            <template #default="scope">{{basicConfig.boxTypeInfo1[scope.row.boxType]}}</template>
          </el-table-column>
          <el-table-column prop="boxCondition" fixed  label="箱况" align="center" width="60">
            <template #default="scope">{{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}</template>
          </el-table-column>
          <el-table-column prop="yardName" fixed  label="堆场" align="center" width="150"/>

          <el-table-column prop="receivableLiftingFee" label="应收吊装费" align="center" width="200">
            <template #default="scope">
              <el-row class="elRow">
                <el-col :span="8"> 
                  <el-select v-model="scope.row.receivableLiftingFeeCurrency">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <el-input v-model.trim="scope.row.receivableLiftingFee" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="receivableStorageFeePrice" label="应收堆存超期费单价" align="center" width="200">
            <template #default="scope">
              <el-row class="elRow">
                <el-col :span="8"> 
                  <el-select v-model="scope.row.receivableStorageFeePriceCurrency">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <el-input v-model.trim="scope.row.receivableStorageFeePrice" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                </el-col>
              </el-row>
            </template>
          </el-table-column>

          <el-table-column prop="paymentLiftingFee" label="应付吊装费" align="center" width="100">
            <template #default="scope">
              <el-row class="elRow" style="border: none;" v-if="scope.row.paymentLiftingFee">
                <el-col :span="8"> 
                  <span v-if="scope.row.paymentLiftingFeeCurrency == 'CNY'">￥</span>
                  <span v-if="scope.row.paymentLiftingFeeCurrency == 'USD'">$</span>
                </el-col>
                <el-col :span="16">{{scope.row.paymentLiftingFee}}</el-col>
              </el-row>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="paymentStorageFeePrice" label="应付堆存超期费单价" align="center" width="150">
            <template #default="scope">
              <el-row class="elRow" style="border: none;" v-if="scope.row.paymentStorageFeePrice">
                <el-col :span="8"> 
                  <span v-if="scope.row.paymentStorageFeeCurrency == 'CNY'">￥</span>
                  <span v-if="scope.row.paymentStorageFeeCurrency == 'USD'">$</span>
                </el-col>
                <el-col :span="16">{{scope.row.paymentStorageFeePrice}}</el-col>
              </el-row>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="outDate" label="离场日期" align="center" width="150">
            <template #default="scope">
              <el-date-picker v-model="scope.row.outDate" type="date" style="width: 100%;border: 1px solid #ddd;border-radius: 3px;" placeholder="请选择日期" clearable :disabled-date="(date) => disabledDate(date, scope.row.inDate)"/>
            </template>
          </el-table-column>
          <el-table-column prop="outBoxCompanyName" label="集装箱公司" align="center" width="120">
            <template #default="scope">
              {{scope.row.outBoxCompanyName || "--"}}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center" width="200">
            <template #default="scope">
              <el-input v-model.trim="scope.row.remark" class="elInput"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80">
              <template #default="scope">
                <el-row >
                  <el-col :span="12"><el-icon ><EditPen @click="openEditEscrow(scope.row.containerNo)"/></el-icon></el-col>
                  <el-col :span="12"><el-icon><Delete color="#ff0000" @click="deleteEscrowItem(scope.$index)"/></el-icon></el-col>
                </el-row>
              </template>
          </el-table-column>
        </el-table>
        <el-row justify="center" class="marginTop20">
          <el-col :span="2"><el-button plain @click="dialogEscrow=false">取消</el-button></el-col>
          <el-col :span="2"><el-button type="primary" @click="submitCustody">确定</el-button></el-col>
        </el-row>
      </el-dialog>
      <el-dialog v-model="dialogEscrowfees" width="55%"><!--批量填写代管费用明细-->
          <span class="_before">批量填写费用明细</span>
          <el-form :inline="true" :model="escrowfeesData" :label-position="'right'" label-width="auto" class="form-inline editDataInfo" :rules="editRuler">
            <el-form-item label="应收吊装费" prop="receivableLiftingFee">
              <el-row class="line-content elRow">
                <el-col :span="7"> 
                  <el-select v-model="escrowfeesData.receivableLiftingFeeCurrency" size="small">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="17">
                  <el-input v-model.trim="escrowfeesData.receivableLiftingFee"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="应收堆存超期费" prop="receivableStorageFeePrice">
              <el-row class="line-content elRow">
                <el-col :span="7"> 
                  <el-select v-model="escrowfeesData.receivableStorageFeePriceCurrency" size="small">
                    <el-option label="$" value="USD"></el-option>
                    <el-option label="￥" value="CNY"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="17">
                  <el-input v-model.trim="escrowfeesData.receivableStorageFeePrice"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <el-row justify="center" class="marginTop20">
            <el-col :span="2"><el-button plain @click="restEscrowfees">重置</el-button></el-col>
            <el-col :span="2"><el-button type="primary" @click="sureEscrowfees">确定</el-button></el-col>
          </el-row>
      </el-dialog> 
      <el-dialog v-model="dialogExcelUploadError"> <!--导入时信息提示-->
        <template v-if="errorType == 'E0001'" >
          <span class="_before">错误提示</span>
          <div style="margin: 20px 0;">异常数据<span style="color: #f59127;">{{dialogExcelUploadErrordInfo.length || "--"}}</span>条，下面是有异常的信息，请您修改后重新导入</div>
          <el-table :data="dialogExcelUploadErrordInfo" border style="width: 100%">
              <el-table-column prop="rowNum" label="异常位置" align="center"  width="200">
                <template #default="scope">第{{scope.row.rowNum}}行</template>
              </el-table-column>
              <el-table-column prop="errorMsg" label="异常原因" align="center" />
          </el-table>
        </template>
        <template v-else-if="errorType == 'B0001'">
          <span class="_before">错误提示</span>
          <div style="margin: 20px 0;text-align: center;">{{dialogExcelUploadErrordInfo}}</div>
        </template>
        <template v-else>
          <span class="_before">成功提示</span>
          <div style="margin: 20px 0;text-align: center;">{{dialogExcelUploadErrordInfo}}</div>
        </template>

        <el-row justify="center" class="marginTop20">
          <el-col :span="3" class="text-center"> <el-button type="primary" @click="dialogExcelUploadError=false">确定</el-button></el-col>
        </el-row>
      </el-dialog>
      <el-dialog v-model="dialogSellBoxes"  width="1300px"> <!--卖出集装箱-->
        <span class="_before">卖出集装箱</span>
        <el-form :model="sellBoxesData" :inline="true" :label-position="'right'" label-width="auto" :rules="sellBoxesDataRuler" class="form-inline editDataInfo">
          <el-form-item label="箱号" prop="containerNo">
            <div class="line-content">{{sellBoxesData.containerNo || "--"}}</div>
          </el-form-item>
          <el-form-item label="箱型" prop="boxType">
            <div class="line-content">{{basicConfig.boxTypeInfo1[sellBoxesData.boxType] || "无箱型信息"}}</div>
          </el-form-item>
          <el-form-item label="箱况" prop="boxCondition">
            <div class="line-content">{{basicConfig.boxConditionInfo2[sellBoxesData.boxCondition] || "无箱况信息"}}</div>
          </el-form-item>
          <el-form-item label="箱源" prop="containerClassify">
            <div class="line-content">{{{5:"自有",10:"代管",15:"外调"}[sellBoxesData.containerClassify]}}</div>
          </el-form-item>
          <el-form-item label="业务编号" prop="businessNo">
            <div class="line-content"><el-input v-model.trim="sellBoxesData.businessNo" class="elInput"></el-input></div>
          </el-form-item>
          <el-form-item label="出售日期" prop="sellDate">
            <div class="line-content">
              <el-date-picker v-model="sellBoxesData.sellDate" type="date" style="width: 100%;border: 1px solid #ddd;border-radius: 3px;" placeholder="请选择日期" :disabled-date="disabledDateSell" clearable/>
            </div>
          </el-form-item>
          <el-form-item label="买入价" prop="buyInPrice">
            <el-row class="line-content elRow">
              <el-col :span="7"> 
                <el-select v-model="sellBoxesData.buyInPriceCurrency" size="small">
                  <el-option label="$" value="USD"></el-option>
                  <el-option label="￥" value="CNY"></el-option>
                </el-select>
              </el-col>
              <el-col :span="17">
                <el-input v-model.trim="sellBoxesData.buyInPrice"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="卖出价" prop="sellOutPrice">
            <el-row class="line-content elRow">
              <el-col :span="7"> 
                <el-select v-model="sellBoxesData.sellOutPriceCurrency" size="small">
                  <el-option label="$" value="USD"></el-option>
                  <el-option label="￥" value="CNY"></el-option>
                </el-select>
              </el-col>
              <el-col :span="17">
                <el-input v-model.trim="sellBoxesData.sellOutPrice"></el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item v-if="sellBoxesData.containerClassify == '10'" label="应收吊装费" prop="receivableLiftingFee">
            <el-row class="line-content elRow">
              <el-col :span="7"> 
                <el-select v-model="sellBoxesData.receivableLiftingFeeCurrency" size="small">
                  <el-option label="$" value="USD"></el-option>
                  <el-option label="￥" value="CNY"></el-option>
                </el-select>
              </el-col>
              <el-col :span="17">
                <el-input v-model.trim="sellBoxesData.receivableLiftingFee"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item  v-if="sellBoxesData.containerClassify == '10'" label="应收堆存超期费单价" prop="receivableStorageFeePrice">
            <el-row class="line-content elRow">
              <el-col :span="7"> 
                <el-select v-model="sellBoxesData.receivableStorageFeePriceCurrency" size="small">
                  <el-option label="$" value="USD"></el-option>
                  <el-option label="￥" value="CNY"></el-option>
                </el-select>
              </el-col>
              <el-col :span="17">
                <el-input v-model.trim="sellBoxesData.receivableStorageFeePrice"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item  v-if="sellBoxesData.containerClassify == '10'" label="应付吊装费" prop="paymentLiftingFee">
            <el-row class="line-content">
              <el-col :span="3"> {{{"USD":"$","CNY":"￥"}[sellBoxesData.paymentLiftingFeeCurrency]}}</el-col>
              <el-col :span="17">{{sellBoxesData.paymentLiftingFee}}</el-col>
            </el-row>
          </el-form-item>
          <el-form-item  v-if="sellBoxesData.containerClassify == '10'" label="应付堆存超期费单价" prop="paymentStorageFeePrice">
            <el-row class="line-content">
              <el-col :span="3"> {{{"USD":"$","CNY":"￥"}[sellBoxesData.paymentStorageFeeCurrency]}}</el-col>
              <el-col :span="17">{{sellBoxesData.paymentStorageFeePrice}}</el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="客户" prop="agentName">
            <div class="line-content elRow">
                <el-input v-model.trim="sellBoxesData.agentName" placeholder="请输入..."/>
            </div>
          </el-form-item>
          <el-form-item label="集装箱公司" prop="outBoxCompanyName">
            <div class="line-content">{{sellBoxesData.outBoxCompanyName|| '--'}}</div>
          </el-form-item>
          <el-form-item label="备注" prop="remark" style="width: 89%;" >
              <el-input v-model.trim="sellBoxesData.remark" type="textarea" show-word-limit maxlength="1000" rows="2" />
          </el-form-item>
        </el-form>
        <el-row class="marginTop20">
          <el-col :span="12">
            <el-row>
              <el-col :offset="2" :span="5" style="height: 40px;line-height: 40px;font-weight: 550;font-size: 16px;"><span style="color:#ff0000">*</span>额外费用币种:</el-col>
              <el-col :span="16">
                <el-radio-group v-model="sellBoxesAdditionalCostsCurrency" @change="sellBoxesCurrency" style="height: 40px;line-height: 40px;">
                  <el-radio value="USD" size="large">美元($)</el-radio>
                  <el-radio value="CNY" size="large">人民币(¥)</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </el-col>
          <el-col :offset="8" :span="2"><el-button @click="addItemSellBoxesCosts">添加</el-button></el-col>
        </el-row>
        <el-row class="otherFeeList marginTop10" style="width: 85%;margin-left: 5%;">
          <el-col :span="4" class="feeListHeader">额外费用明细</el-col>
          <el-col :span="5" class="feeListHeader">金额</el-col>
          <el-col :span="5" class="feeListHeader">结算流向</el-col>
          <el-col :span="10" class="feeListHeader">结算单位</el-col>
          <template v-for="(item,index) in sellBoxesAdditionalCosts" :key="index">
            <el-col :span="4" class="feeListContent">
              <el-select v-model="item.feeCode" style="width:60%;">
                <el-option label="修箱费" value="5"></el-option>
                <el-option label="提箱费" value="10"></el-option>
                <el-option label="翻箱费" value="15"></el-option>
                <el-option label="其它费用" value="20"></el-option>
              </el-select>
            </el-col>
            <el-col :span="5" class="feeListContent">
              <el-input v-model.trim="item.feeAmount" style="width:60%;" :formatter="formatterNumber" :parser="formatterNumber">
                <template #prefix>
                  <span>{{ { "USD": '$', "CNY": '￥' }[item.feeCurrency] }}</span>
                </template>
              </el-input>
            </el-col>
            <el-col :span="5" class="feeListContent">
              <el-select v-model="item.feeDirection" style="width:60%;">
                <el-option label="应收" value="1"></el-option>
                <el-option label="应付" value="-1"></el-option>
              </el-select>
            </el-col>
            <el-col :span="10" class="feeListContent elSelect">
              <el-input v-model.trim="item.feeCompanyName"  style="width:90%" :formatter="inputText">
                <template #prefix>
                  <el-select v-model="item.feeFlag" style="width: 100px;">
                    <el-option label="客户" value="5"></el-option>
                    <el-option label="堆场" value="10"></el-option>
                    <el-option label="第三方" value="15"></el-option>
                  </el-select>
                </template>
              </el-input> 
              <span v-if="sellBoxesAdditionalCosts.length > 1" style="text-align: center; width: 10%; display: inline-block;">
                <el-icon><Delete color="#ff0000" @click="deleteItemSellBoxesCosts(index)"/></el-icon>
              </span>
            </el-col>
          </template>
        </el-row>
        <el-row justify="center" class="marginTop20">
          <el-col :span="3"><el-button plain @click="restSellBoxes">重置</el-button></el-col>
          <el-col :span="3"><el-button type="primary" plain @click="submitSellBoxes">确定</el-button></el-col>
        </el-row>
      </el-dialog>

      <el-dialog v-model="dialogBuyBox" width="1300px"> <!--买入集装箱-->
        <span class="_before">买入集装箱</span>
        <el-form :model="buyBoxDate" :inline="true" :label-position="'right'" label-width="auto" :rules="sellBoxesDataRuler" class="form-inline editDataInfo">
          <el-form-item label="箱号" prop="containerNo">
            <div class="line-content">{{buyBoxDate.containerNo || "--"}}</div>
          </el-form-item>
          <el-form-item label="箱型" prop="boxType">
            <div class="line-content">{{basicConfig.boxTypeInfo1[buyBoxDate.boxType] || "无箱型信息"}}</div>
          </el-form-item>
          <el-form-item label="箱况" prop="boxCondition">
            <div class="line-content">{{basicConfig.boxConditionInfo2[buyBoxDate.boxCondition] || "无箱况信息"}}</div>
          </el-form-item>
          <el-form-item label="箱源" prop="containerClassify">
            <div class="line-content">{{{5:"自有",10:"代管",15:"外调"}[buyBoxDate.containerClassify]}}</div>
          </el-form-item>
          <el-form-item label="业务编号" prop="businessNo">
            <div class="line-content"><el-input v-model.trim="buyBoxDate.businessNo" class="elInput"></el-input></div>
          </el-form-item>
          <el-form-item label="集装箱公司" prop="outBoxCompanyName">
            <div class="line-content">{{buyBoxDate.outBoxCompanyName|| '--'}}</div>
          </el-form-item>
          <el-form-item label="买入日期" prop="buyDate">
            <div class="line-content">
              <el-date-picker v-model="buyBoxDate.buyDate" type="date" style="width: 100%;border: 1px solid #ddd;border-radius: 3px;" placeholder="请选择日期" clearable/>
            </div>
          </el-form-item>
          <el-form-item label="买入价" prop="buyInPrice">
            <el-row class="line-content elRow">
              <el-col :span="7"> 
                <el-select v-model="buyBoxDate.buyInPriceCurrency" size="small">
                  <el-option label="$" value="USD"></el-option>
                  <el-option label="￥" value="CNY"></el-option>
                </el-select>
              </el-col>
              <el-col :span="17">
                <el-input v-model.trim="buyBoxDate.buyInPrice"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="买箱城市" prop="buyCityId">
            <div class="line-content">
              <SelectCity :selectCityId="buyBoxDate.buyCityId" :index="1" :config="{}" @cityId="buyBoxPickingCity" class="elInput"></SelectCity>
            </div>
          </el-form-item>
          <el-form-item label="堆场地址" prop="yardName">
            <div class="line-content">{{buyBoxDate.yardName}}</div>
          </el-form-item>
          <el-form-item label="进场日期" prop="inDate">
            <div class="line-content">{{formatDate(buyBoxDate.inDate,2)}}</div>
          </el-form-item>
          <el-form-item label="备注" prop="remark" style="width: 89%;" >
              <el-input v-model.trim="buyBoxDate.remark" type="textarea" show-word-limit maxlength="1000" rows="2" />
          </el-form-item>
        </el-form>
        <el-row justify="center" class="marginTop20">
          <el-col :span="3"><el-button plain @click="restBuyBox">重置</el-button></el-col>
          <el-col :span="3"><el-button type="primary" plain @click="submitBuyBox">确定</el-button></el-col>
        </el-row>
      </el-dialog>

      <el-dialog v-model="dialogAttachment" width="800px">
        <!-- <span class="_before" v-if="attacType == 2">上传附件</span>
        <span class="_before" v-else-if="attacType == 1">查看附件</span> -->
        <span class="_before">附件</span>
        <div class="marginTop20">
          <uploadFile ref="addBoxFileRef1" v-if="dialogAttachment" :type="'jpg/png/jpeg'" :urlList="attachmentFile"  :displayType="2" :limit="10" :purpose="'upload'" :drag="true"></uploadFile>
        </div>
        <el-divider border-style="dashed" />
        <el-row justify="center" align="middle" class="marginTop20">
          <e-col :span="5" class="text-center"><el-button @click="dialogAttachment = false">关闭</el-button></e-col>
          <el-col :span="5" class="text-center"><el-button type="primary" @click.stop="submitAttac">确认</el-button></el-col>
        </el-row>
      </el-dialog>
  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table'
import czTages from '@/components/chengzhiTags'
import { formatDate } from '@/utils/index'
import citySelect from '@/components/citySelect'
import SelectCity from '@/components/citySelect/selectCity'
import yardSelect from '@/components/citySelect/yardSelect'
import SelectYard from '@/components/citySelect/selectYard'
import { updateContainerFile, getTable, getBoxInfo, addBox, updateBox, deleteBox, returnContainer, updateContainersMark, batchCarryBox ,containerYardFees,exportContainer,toEscrowBox,toEscrowEnd,sellContainer,buyContainer,statusCount,addContainerOtherFee} from '@/api/boxManage/index'
import boxInfo from '@/views/components/boxInfo.vue'
import pathTable from '@/views/components/pathTable.vue'
// import uploadFile from '@/components/upload/index.vue'
import uploadFile from '@/components/upload/uploadFiles-Images'
import { getInterValDays } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, getCurrentInstance, onMounted, reactive, ref,nextTick } from 'vue';
import {Plus,Delete,Edit,Message,Search,Download,Upload,Refresh,Grid,Menu,Sort,Switch,Finished} from '@element-plus/icons-vue'
import  basicConfig from '@/constant/containerInfo';
import MultipleBoxNumbersDialog from '@/components/dialog/multipleBoxNumbersDialog.vue'
import { downloadFile } from '@/utils/download'
import {formatContainerNo} from '@/utils/mlpBox' // 格式化箱号
import validationRules from '@/directive/rulers'  // 表单验证规则

const activeNames = ref(['0'])
const showTableItem = ref()

const filterTbaleItem = ref([
  { value:'containerNo',label:'箱号' },{ value:'boxType',label:'箱型' },
  { value:'boxCondition',label:'箱况' },{ value:'status',label:'状态' },
  { value:'location',label:'实时位置' },{ value:'outBoxCompanyName',label:'集装箱公司' },
  { value:'carryCityName',label:'提箱城市' },{ value:'returnCityName',label:'还箱城市' },
  { value:'inDate',label:'进场日期' },{ value:'inDays',label:'堆存天数' },
  { value:'outDate',label:'离场日期' },{ value:'outDays',label:'离场天数' },
  { value:'overDays',label:'超期天数' },{ value:'overdueDays',label:'超期费' },
  { value:'containerClassify',label:'箱源' },{ value:'orderType',label:'业务类型' },
  { value:'agentName',label:'客户' },{ value:'totalWeight',label:'箱标' },
  { value:'remark',label:'备注' },{ value:'operate',label:'操作' },
])
const handleGroupChange = () => {
  sessionStorage.setItem('showTableItem', JSON.stringify(showTableItem.value));
  table.header.forEach(item => {
    item.isCheck = showTableItem.value.includes(item.key)
  })
}
const customBoxInfo = {  //多箱号 提示信息
  placeholder1:'请输入',
  title:'输入实时位置',
  placeholder2:'请输入多个实时位置以英文逗号隔开',
  button:'多堆场'
}
const rowData = ref({});
const editDataRef=ref()
const param = reactive({
  containerNo:"",
  value1: [],
  orderType:'',
  boxInfo: { code: '123456789', type: "40HQ", info: "无" },
  statusFilter: { 5: '堆存中', 10: '提箱中', 15: '已提', 20: '未还', 25: '还箱中', 30: '已卖', 35: '外加' },
  pageNum: 1,
  pageSize: 10,
  dialogTableVisible: false,
  dialogInfoVisible: false,
  dialogEditVisible: false,
  dialogVisible: false,
  dialogPathVisible: false,
  dialogPitchUploadVisible:false,
  dialogBoxVisible:false,
  title: '添加集装箱',
  boxOutDate: new Date(),
  statusOptions: [
    { value: '5', label: '堆存中', },
    // { value: '10', label: '提箱中', },
    { value: '15', label: '已提', },
    { value: '20', label: '未还', },
    { value: '25', label: '还箱中', },
    { value: '30', label: '未还已卖', },
    { value: '33', label: '已出售', },
    { value: '35', label: '外加', },
    { value: '40', label: '已还箱', },
    { value: '45', label: '结束代管', },
  ], // { 5: '堆存中', 10: '提箱中', 15: '已提', 20: '未还', 25: '还箱中', 30: '未还已卖',33: '已出售', 35: '外加',40:'已还箱',45:'结束代管' }
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    { value: '5', label: '40HQ', },
    { value: '10', label: '40GP', },
    { value: '15', label: '20HQ', },
    { value: '20', label: '20GP', },
  ],
  boxCaseOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    { value: '15', label: '适货', },
    { value: '10', label: '次新', },
    { value: '5', label: '全新', },
    // { value: '20', label: '混提(次新或者适货)', },
  ],
  orderTypeList:[
    { value: '5', label: '出口箱', },
    { value: '10', label: '进口箱', },
    { value: '20', label: '出售箱 ', },
  ],
  containerClassifys: [ //5-租箱 15-外调 
    { value: '5', label: '否', },
    { value: '15', label: '是', },
  ],
  inDate: [],
  outDate: [],
  remarksTitle: '添加备注',
  totalWeight:"",
  locations:"",
  statusList:[]
});

const table = reactive({
  // 列表数据（必传）
  data: [],
  // 表头内容（必传，注意格式）
  header: [
    { key: 'containerNo', key2: 'oidContainerNo', key3: '', colWidth: '140', title: '箱号', type: '<change>', command: 'showInfo',fixed:'left', isCheck: true },
    { key: 'boxType', colWidth: '65', title: '箱型', type: 'filter', filter: { 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' }, isCheck: true },
    { key: 'boxCondition', colWidth: '55', title: '箱况', type: 'filter', filter: { 5: '全新', 10: '次新', 15: '适货' }, isCheck: true },
    {
      key: 'status', colWidth: '80', title: '状态', type: 'filter',
      filter: basicConfig.containerStatus, //5-堆存中、10-提箱中、15-已提、20-未还、25-还箱中 30-已卖
      cFilter: { 5: '#2158F3', 10: '#22A86D', 15: '#22A86D', 20: '#2158F3', 25: '#22A86D', 30: '#2158F3' }, isCheck: true
    },
    { key: 'location', colWidth: '120', title: '实时位置', type: 'text', isCheck: true },
    { key: 'outBoxCompanyName', colWidth: '200', title: '集装箱公司', type: 'text', isCheck: true },
    { key: 'carryCityName', colWidth: '80', title: '提箱城市', type: 'text', isCheck: true },
    { key: 'returnCityName', colWidth: '80', title: '还箱城市', type: 'text', isCheck: true },
    { key: 'inDate', colWidth: '110', title: '进场日期',  type: 'date',sortable:'custom', isCheck: true },
    { key: 'inDays', colWidth: '110', title: '堆存天数', sortable:'custom',  type: 'number', isCheck: true },
    { key: 'outDate', colWidth: '110', title: '离场日期',sortable:'custom',  type: 'date', isCheck: true },
    { key: 'outDays', key2: 'yardName', colWidth: '130', title: '离场天数', sortable:'custom',  type: 'number', isCheck: true },
    { key: 'overDays', colWidth: '110', title: '超期天数',sortable:'custom', type: 'number', isCheck: true },
    { key: 'overdueDays', key2:'overDays', colWidth: '85', title: '超期费($)', type: 'calculate', isCheck: true },
    { key: 'containerClassify', colWidth: '120', title: '箱源', type: 'filter',filter: { 5: '自有箱', 10: '代管箱', 15: '外调箱' },  isCheck: true },
    { key: 'orderType', colWidth: '120', title: '业务类型', type: 'filter',filter: { 5:'出口箱', 10:'进口箱', 20:'出售箱',25:'购箱',null:'--'}, isCheck: true },
    { key: 'agentName', colWidth: '200', title: '客户', type: 'text', isCheck: true },
    { key: 'totalWeight', colWidth: '130', title: '箱标', type: 'text',  isCheck: true },
    {
      key: 'remark',
      colWidth: '80',
      title: '备注',
      type: 'remark',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          icon: 'Plus',
          command: 'activeRemark',
          isShow: (row: any) => {
            return !row.remark && row.returnBoxStatus != 20;
            //returnBoxStatus 还箱单状态: 5-已发放 10-已下载 15-还箱中 20-已完成 25-已过期
          },
        },
        {
          icon: 'Edit',
          command: 'activeRemark',
          showOnlyKey: true,
          // isReadOnly: (row: any) => {
          //   return row.returnBoxStatus != 20;
          // },
          isShow: (row: any) => {
            return row.remark;
          },
        },
      ],
    },
    {
      key: 'operate',
      colWidth: '150',
      title: '操作',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          command: 'activEdit',
          name:'编辑',
          isShow: (row:any) => {
            return row.status != '33' && row.status != '30' && row.status != '40' && row.status != '45';
          },
        },
        {
          command: 'activDelete',
          name:'删除',
          color:'#f00',
          isShow: (row: { status: string }) => {
            return row.status == '5' || row.status == '30' || row.status == '33' || row.status == '40' || row.status == '45';
          },
        },
        {  
          command: 'showPath',
          name:'轨迹',
        },
        {  
          command: 'attachFile',
          name:'附件',
          isShow: (row:any) => {
            return !row.fileList;
          },
        },
        {  
          command: 'viewAttach',
          name:'附件',
          isShow: (row:any) => {
            return row.fileList;
          },
        },
        {  
          command: 'additionalFee',
          name:'额外费用',
          isShow: (row:any) => {
            return (row.containerClassify == 5 && row.status == 5);
          },
        }
      ],
    },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  }
 
});

let form = reactive({
  containerNo: '',
  boxCase: '',
  boxType: '5',
  containerClassify: '5',
  outBoxCompanyName: '',
  agentName:'',
  boxUsagePeriod: 60,
  boxCondition: '5',
  totalWeight:'30480/32500KG',
  overdueFeeDay:'1',
  status: '1',
  location: '0',
  outDate:'',
  outDays:'',
  inDate:'',
  inDays:'',
  backCity:'',
  carryCity:"",
  localOptions: [{ value: '1', label: '在途' }, { value: '2', label: '堆场' }],
  stateOptions: [{ value: '1', label: '未还' }, { value: '2', label: '堆存中' }],
  remark:''
})

const addFormRules = {  //添加集装箱 表单验证
  ...validationRules.containerRules1,
    location: [
      { required: true, trigger: "blur", message: "不能为空" },
      { 
        validator: (rule, value, callback) => {
          if(!havePriceList.value.length){
            callback(new Error('请您在我的堆场中补录堆存费信息'));
          }else{
            callback();
          }
        },
        trigger: 'blur'
      }
    ],
}

function handleTypeChange(val: any) {
  console.log(val)
  // param.statusType = val
  param.containerClassify = val
  getTableData()
  deselectAll()
}
// 获取列表数据
const sortBeans = ref([])
function getTableData() {
  const { container, containerList } = formatContainerNo(param.containerNo);
  const { container:location, containerList:locationList } = formatContainerNo(param.locations);
  if(location){
    locationList.push(location)
  }

  let data = {
    containerNo: container, // 单箱号查询
    containerNos: containerList, // 多箱号查询
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    returnCityId: param.returnCityId,
    orderType:param.orderType,
    // boxEastYardId: param.boxEastYardId,
    locations: locationList ,
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    totalWeight:param.totalWeight,
    carryCityId: param.carryCityId,
    agentName:param.agentName,
    outBoxCompanyName:param.outBoxCompanyName,
    containerClassify:param.containerClassify,
    statusList:param.statusList,
    sortBeans:sortBeans.value
  };
  // if (param.status) {
  //   data.statusList = [param.status - 0]
  // }
  if (param.inDate && param.inDate.length > 1) {
    data.beginInDate = param.inDate[0]
    data.endInDate = param.inDate[1]
  }
  if (param.outDate && param.outDate.length > 1) {
    data.beginOutDate = param.outDate[0]
    data.endOutDate = param.outDate[1]
  }
  table.config.loading = true;
 
  getTable(data).then(res => {
    table.data = res.data.list;
    table.data.forEach((item: any) => {
      let days = item.outDays - item.boxUsagePeriod
      item.overDays = days > 0 ? days : 0
    })
    table.config.total = res.data.total; 
  });
  getStatusCount(data)
  table.config.loading = false;
}
const typeList =ref([
    { id: 0, name: '全部',num:0 },
    { id: 5, name: '自有箱',num:0 },
    { id: 10, name: '代管箱',num:0 },
    { id: 15, name: '外调箱',num:0 },
])
// 查询各箱源状态的数量
const getStatusCount = async(data:any) => { 
  await statusCount(data).then((res: any) => {
    if(res.code == '00000'){
      typeList.value.forEach(item => { 
        item.num = 0
        res.data.forEach(item1 => { 
          if(item.id == 0){ //全部
            item.num += item1.totalQty
          }else if(item.id == 5 && item1.status == 5){ //自有箱
              item.num += item1.totalQty
          }else if(item.id == 10 && item1.status == 10){ //代管箱
              item.num += item1.totalQty
          }else if(item.id == 15 && item1.status == 15){ //外调箱
              item.num += item1.totalQty
          }
        })
      })
    }
  })
}

//重置
function handleReSet() {
  param.boxType = null
  param.boxCondition = null
  param.backCity = null
  param.cityList = []
  param.carryCityList = []
  param.status = null
  param.inDate = null
  param.outDate = null
  param.yardName = null
  param.boxEastYardId = null
  param.containerNo = ""
  param.locations = ""
  param.returnCityId = null
  param.outBoxCompanyName = null
  param.agentName = null
  param.containerClassify = null
  param.totalWeight = null
  param.carryCityId = null
  param.orderType=''
  param.statusList = [];
  getTableData()
}

const activeRemark = (row: any) => {
  rowData.value = row;
  console.log("activeRemark",row)
  param.remarkValSync = row.remark;
  param.dialogVisibleRemark = true;
  if (row.remark) {
    param.remarksTitle = '编辑备注'
  } else {
    param.remarksTitle = '添加备注'
  }
};
//添加|修改备注
const handleRemark = (row: any) => {
  const data = { id: rowData.value.id, "remark": param.remarkValSync }
  updateContainersMark(data).then((res: any) => {
    ElMessage.success('备注修改成功');
    param.dialogVisibleRemark = false;
    getTableData()
  })
};

//
const uploadFileRef = ref({ clearFiles: () => { }});
const handleUpload = () => {
  param.dialogPitchUploadVisible = true
  uploadFileRef.value.clearFiles()
};

const dialogExcelUploadError = ref(false)
const dialogExcelUploadErrordInfo = ref()
const errorType = ref()
// 上传集装箱失败调用
const excelUploadError = (info:any) =>{
  dialogExcelUploadError.value = true
  if(info.code == "E0001"){
    errorType.value = 'E0001'
    dialogExcelUploadErrordInfo.value = JSON.parse(info.data)
  }else if(info.code == "B0001"){
    errorType.value = 'B0001'
    dialogExcelUploadErrordInfo.value = info.msg
  }else{
    errorType.value = '00000'
    dialogExcelUploadErrordInfo.value = info.data
  }
}

// 上传集装箱成功调用
const uploadSuccess = (_row:any) => {
  getTableData();
  param.dialogPitchUploadVisible = false
  ElMessage.success({
    message:_row.data,
    duration: 10000
  }) 

}

const addFormRef = ref()
//添加集装箱
const handleAdd = () => {
  form.containerNo = ''
  form.boxType = '5'
  form.containerClassify = '5'
  form.boxUsagePeriod = 60
  form.boxCondition = '5'
  form.location = ''
  form.outBoxCompanyName =''
  form.remark = ''
  form.backCity = ''
  form.outDays = '0'
  form.inDate = []
  form.outDate = []
  form.cityList = []
  form.carryCityList = []
  selectRef.value?.forceClear()
  addFormRef.value?.clearValidate()
  param.dialogTableVisible = true
};

const selectRef = ref()
const restData = ()=> {
  form.containerNo = ''
  form.boxType = '5'
  form.containerClassify = '5'
  form.boxUsagePeriod = 60
  form.boxCondition = '5'
  form.location = ''
  form.inDays = ''
  form.outBoxCompanyName =''
  form.remark = ''
  form.backCity = ''
  form.outDays = 0
  form.inDate = []
  form.outDate = []
  form.cityList = []
  form.carryCityList = []
  form.statusList = [];
  selectRef.value.forceClear()
}
//保存集装箱信息
const { proxy } = getCurrentInstance();
const addBoxFileRef = ref()
const handleSaveAdd = () => {
  proxy.$refs.addFormRef.validate(valid => {
    if (!valid) return
    let data = {
        containerNo: form.containerNo,
        boxType: form.boxType - 0,
        boxCondition: form.boxCondition - 0,
        totalWeight: form.totalWeight,
        location: form.yardName,
        containerClassify:form.containerClassify,
        outBoxCompanyName:form.outBoxCompanyName,
        fileList:JSON.stringify(addBoxFileRef.value.fileList),
        remark:form.remark
      }
    let isSubmit:Boolean = true
    if(form.location == '1'){ // 在途
      data.boxUsagePeriod = form.boxUsagePeriod
      data.overdueFeeDay = form.overdueFeeDay
      data.carryCityId = form.carryCity
      data.returnCityId = form.backCity
      data.outDate = form.outDate
      data.outDays = form.outDays
      data.agentName = form.agentName

      const cityListInfo = localStorage.getItem('cityList')
      let cityList:any
      try { 
        cityList = JSON.parse(cityListInfo)
      }catch (error) { 
        cityList = cityListInfo
      }
      let listFilter = cityList.filter((item) => item.id == form.backCity || item.id == form.carryCity)
      if(listFilter.length  == 2){
        const [city1, city2] = listFilter;
        if(city1.cityType  == city2.cityType){
          isSubmit = false
          ElMessage.warning("添加在途状态下的集装箱,提/还箱城市分别在国内和国外")
        }
      }
    }else{ // 堆存中
      data.boxEastYardId = form.location
      data.inDate = form.inDate
      data.inDays = form.inDays
      isSubmit = true
    }
    if(isSubmit){
        addBox(data).then((res: any) => {
          getTableData()
          param.dialogTableVisible = false
        })
    }
  })
};

//根据id获取集装箱信息
const getBoxDataInfo = async (id: any) => {
  let ressult = {}
  await getBoxInfo(id).then((res: any) => {
    ressult = res.data
    // console.log(ressult)
  })
  return ressult
}

// 编辑集装箱
const editContainer = ref({})
const editContainerRuler = {
  ...validationRules.containerRules2,
    location:[
      { required: true, trigger: "blur", message: "不能为空" },
      {
          validator: (rule, value, callback) => {
            if (!havePriceList.value.length) {
              callback(new Error('请您在我的堆场中补录堆存费信息'));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        }
    ],

}
const editFrom = ref()
const activEdit = async (row: any) => {  // 编辑集装箱 { 5: '堆存中', 10: '提箱中', 15: '已提', 20: '未还', 25: '还箱中', 30: '未还已卖',33: '已出售', 35: '外加',40:'已还箱',45:'结束代管' }
  if(row.status == "5"|| row.status == "15" || row.status == "20" ||row.status == "25" || row.status == "35" || row.status == "40" || row.status == "45" ){
    editContainer.value = await getBoxDataInfo(row.id)
    form.status = row.status + ''
    form.boxCondition = row.boxCondition + ''
    editFrom.value?.clearValidate()
    if(row.fileList){
      editHmentFile.value = JSON.parse(row.fileList)
    }else{
      editHmentFile.value = []
    } 
    
    param.dialogEditVisible = true;
  }else{
     return ElMessage.warning("当前集装箱状态不可编辑")
  }
};
const editBoxFileRef = ref()
const editHmentFile = ref([])
const handleEdit = () => { // 保存编辑集装箱
  if (!editContainer.value.location) return ElMessage.warning('实时位置不能为空！')
    const data = { 
      id: editContainer.value.id, 
      containerNo: editContainer.value.containerNo, 
      boxCondition: editContainer.value.boxCondition - 0,
      totalWeight: editContainer.value.totalWeight,
      inDate:editContainer.value.inDate,
      location: editContainer.value.location,
      boxEastYardId:editContainer.value.boxEastYardId,
      containerClassify:editContainer.value.containerClassify,
      outBoxCompanyName:editContainer.value.outBoxCompanyName,
      fileList:JSON.stringify(editBoxFileRef.value.fileList),
      remark: editContainer.value.remark,
      // otherFeeList:editContainer.value.otherFeeList
    }
    if(editContainer.value.status =='35'){
      data.boxUsagePeriod = editContainer.value.boxUsagePeriod
      data.overdueFeeDay = editContainer.value.overdueFeeDay
      data.returnCityId = editContainer.value.returnCityId
      data.outDate = editContainer.value.outDate
      data.agentName= editContainer.value.agentName
      data.carryCityId = editContainer.value.carryCityId
    }
    
    updateBox(data).then((res: { data: any }) => {
      console.log(res.data)
      param.dialogEditVisible = false
      getTableData()
    })
  };
const editContainerConfig = {
  inIransit: false //是否添加在途状态
}

const editContainerCityId = (info:any)=>{
  havePriceList.value = []
  editContainer.value.boxEastYardId = info[0]?.id
  editContainer.value.location = info[0]?.yardName
  havePriceList.value = info[0]?.priceList || []
}


const dialogSellBoxes = ref(false)
const sellBoxesData = ref({})

const sellBoxesAdditionalCosts = reactive([
  {
    feeCode:'5',
    feeName:'',
    feeAmount:'',
    feeCurrency:'USD',
    feeDirection:'1',
    feeCompanyName:'',
    feeFlag:'5'
  }
]) 
const sellBoxesAdditionalCostsCurrency = ref(sellBoxesAdditionalCosts[0].feeCurrency)
// 卖箱新增条目
const addItemSellBoxesCosts = () =>{ //添加一条额外费用明细
  if(sellBoxesAdditionalCosts.length > 19) return ElMessage.warning("最多只能添加20条费用信息!")
    const newItem = {
      feeCode:'5', //费用代码 5-修箱费 10-提箱费  15-翻箱费  20-其他费用
      feeName:'',
      feeAmount:'',//费用金额
      feeCurrency:sellBoxesAdditionalCostsCurrency.value,//费用币种
      feeDirection:'1',//结算流向(应收:1 应付:-1)  
      feeCompanyName:'',//结算公司名称
      feeFlag:'5',//结算公司标识:5-客户  10-堆场  15-第三方  
    }
    sellBoxesAdditionalCosts.push(newItem)
}
// 卖箱删除条目
const deleteItemSellBoxesCosts = (valIndex) =>{
  sellBoxesAdditionalCosts.splice(valIndex,1)
}


const dialogBuyBox = ref(false)

const sellBoxesDataRuler = {
  ...validationRules.containerRules4
}
const sellIndate = ref('')  //进场日期 -> 用来限制卖出时间
const selloutdate = ref('')  //进场日期 -> 用来限制卖出时间
const selllocation = ref('')  //实时位置 -> 用来限制卖出时间
//卖出箱子
const sellBoxes = async(valNo:any) =>{
  sellBoxesData.value = await getBoxDataInfo(valNo)
  if(Object.keys(sellBoxesData.value).length){
    sellBoxesData.value.buyInPrice = ""
    sellBoxesData.value.buyInPriceCurrency = "USD"
    sellBoxesData.value.sellOutPrice = ""
    sellBoxesData.value.sellOutPriceCurrency = "USD"

    if(sellBoxesData.value.containerClassify == '10'){
      sellBoxesData.value.receivableLiftingFee = ""
      sellBoxesData.value.receivableLiftingFeeCurrency = "USD"
      sellBoxesData.value.receivableStorageFeePrice = ""
      sellBoxesData.value.receivableStorageFeePriceCurrency = "USD"
      sellBoxesData.value.paymentLiftingFee = ""
      sellBoxesData.value.paymentLiftingFeeCurrency = "USD"
      sellBoxesData.value.paymentStorageFeePrice = ""
      sellBoxesData.value.paymentStorageFeeCurrency = "USD"

      await containerYardFees([valNo]).then(res=>{
        if(res.code=="00000"){
          sellBoxesData.value.paymentLiftingFee = res.data[0]?.paymentLiftingFee
          sellBoxesData.value.paymentLiftingFeeCurrency = res.data[0]?.paymentLiftingFeeCurrency
          sellBoxesData.value.paymentStorageFeePrice = res.data[0]?.paymentStorageFeePrice
          sellBoxesData.value.paymentStorageFeeCurrency = res.data[0]?.paymentStorageFeeCurrency
        }
      })
    }
  //   {
  //   feeCode:'5',
  //   feeName:'',
  //   feeAmount:'',
  //   feeCurrency:'USD',
  //   feeDirection:'1',
  //   feeCompanyName:'',
  //   feeFlag:'5'
  // }
    sellBoxesAdditionalCosts.splice(1)
    sellBoxesAdditionalCosts[0].feeCompanyName = ''
    sellBoxesAdditionalCosts[0].feeCurrency = 'USD'
    sellBoxesAdditionalCosts[0].feeAmount = ''

    sellIndate.value = sellBoxesData.value.inDate
    selloutdate.value = sellBoxesData.value.outDate
    selllocation.value = sellBoxesData.value.location
    dialogSellBoxes.value = true
  }else{
    ElMessage.warning("该集装箱状态异常，暂时不能卖出！")
  }
}

// 卖箱修改额外币种
const sellBoxesCurrency = (val:any) =>{
  sellBoxesAdditionalCosts.forEach(item =>{
    item.feeCurrency = val
  })
}

// 重置卖箱信息
const restSellBoxes = ()=>{
  sellBoxesAdditionalCosts.splice(0)
  let item = {feeCode:'5',feeName:'',feeAmount:'',feeCurrency:'USD',feeDirection:'1',feeCompanyName:'',feeFlag:'5'}
    sellBoxesAdditionalCosts.push(item)
    sellBoxesData.value.businessNo = ""
    sellBoxesData.value.sellDate = ""
    sellBoxesData.value.buyInPrice = ""
    sellBoxesData.value.buyInPriceCurrency = "USD"
    sellBoxesData.value.sellOutPrice = ""
    sellBoxesData.value.sellOutPriceCurrency = "USD"
    sellBoxesData.value.receivableLiftingFee = ""
    sellBoxesData.value.receivableLiftingFeeCurrency = "USD"
    sellBoxesData.value.receivableStorageFeePrice = ""
    sellBoxesData.value.receivableStorageFeePriceCurrency = "USD"
    sellBoxesData.value.agentName= ""
    sellBoxesData.value.remark= ""
}

// 提交卖箱
const submitSellBoxes = ()=>{
  sellBoxesAdditionalCosts.forEach(item => {
    if(item.feeCode == "5"){
      item.feeName = "修箱费"
    }else if(item.feeCode == "10"){
      item.feeName = "提箱费"
    }else if(item.feeCode == "15"){
      item.feeName = "翻箱费"
    }else if(item.feeCode == "20"){
      item.feeName = "其他费用"
    }
  })
  let reqParameters = {
       containerId:sellBoxesData.value.id,
       containerNo:sellBoxesData.value.containerNo,
       businessNo:sellBoxesData.value.businessNo,
       sellDate:sellBoxesData.value.sellDate,
       buyInPrice:sellBoxesData.value.buyInPrice,
       buyInPriceCurrency:sellBoxesData.value.buyInPriceCurrency,
       sellOutPrice:sellBoxesData.value.sellOutPrice,
       sellOutPriceCurrency:sellBoxesData.value.sellOutPriceCurrency,

       receivableLiftingFee:null,
       receivableLiftingFeeCurrency:null,
       receivableStorageFeePrice:null,
       receivableStorageFeePriceCurrency:null,

       otherFeeList:sellBoxesAdditionalCosts,
       agentName:sellBoxesData.value.agentName,
       remark:sellBoxesData.value.remark

    // # rate:汇率
    // # agentId:客户Id
  }
  if(sellBoxesData.value.containerClassify == '10'){   // 代管箱需要传以下参数
      reqParameters.receivableLiftingFee = sellBoxesData.value.receivableLiftingFee
      reqParameters.receivableLiftingFeeCurrency = sellBoxesData.value.receivableLiftingFeeCurrency
      reqParameters.receivableStorageFeePrice =sellBoxesData.value.receivableStorageFeePrice
      reqParameters.receivableStorageFeePriceCurrency =sellBoxesData.value.receivableStorageFeePriceCurrency
  }
  sellContainer(reqParameters).then(res =>{
    if(res.code == "00000"){
      dialogSellBoxes.value = false
      param.dialogEditVisible = false
      getTableData()
      ElMessage.success("箱子卖出成功")
    }else{
      ElMessage.warning(res.msg)
    }
  }).catch(error =>{
    console.log("ERROR:", error)
  })

}
const buyBoxDate = ref({})
// 买入箱子
const buyBox = async(valId) =>{
  buyBoxDate.value = await getBoxDataInfo(valId)
  console.log(buyBoxDate.value)
  if(Object.keys(buyBoxDate.value).length){
    buyBoxDate.value.buyInPrice = ''
    buyBoxDate.value.buyInPriceCurrency = 'USD'
  }
  dialogBuyBox.value = true

}

// 提交买入信息
const submitBuyBox = ()=>{
  let reqParameters = {
    containerId: buyBoxDate.value.id,
    containerNo: buyBoxDate.value.containerNo,
    businessNo: buyBoxDate.value.businessNo,
    buyDate: buyBoxDate.value.buyDate,
    buyInPrice: buyBoxDate.value.buyInPrice,
    buyInPriceCurrency: buyBoxDate.value.buyInPriceCurrency,
    buyCityId: buyBoxDate.value.buyCityId,
    buyCityName: buyBoxDate.value.buyCityName,
    buyCountryId: buyBoxDate.value.buyCountryId,
    buyCountryName: buyBoxDate.value.buyCountryName,
    remark: buyBoxDate.value.remark
    // "rate": 7,
  }
  buyContainer(reqParameters).ten(res => {
    if(res.code == "00000"){
      dialogBuyBox.value = false
      param.dialogEditVisible = false
      getTableData()
      ElMessage.success("箱子买入成功")
    }else{
      ElMessage.warning(res.msg)
    }
  }).catch(error =>{
    console.log("ERROR:", error)
  })
}

// 重置买箱输入数据
const restBuyBox = ()=>{
  buyBoxDate.value.businessNo = ""
  buyBoxDate.value.buyDate = ""
  buyBoxDate.value.buyInPrice = ""
  buyBoxDate.value.buyInPriceCurrency = "USD"
  buyBoxDate.value.buyCityId = ""
  buyBoxDate.value.buyCityName = ""
  buyBoxDate.value.buyCountryId = ""
  buyBoxDate.value.buyCountryName = ""
  buyBoxDate.value.remark=""

}
const buyBoxPickingCity = (id: string,index:Number) => {
  let cityList;
  const citylistString = localStorage.getItem("cityList")
  try {
    cityList = JSON.parse(citylistString)
  }catch{
    cityList = citylistString
  }
  cityList.forEach(item =>{
    if(id == item.id){
      buyBoxDate.value.buyCityId = item.id
      buyBoxDate.value.buyCityName = item.cityCName
      buyBoxDate.value.buyCountryId = item.countryId
      buyBoxDate.value.buyCountryName = item.countryCName
    }
  })
}
//下架
const selectionChange = (row: any) => {
  param.dialogTableVisible = true;
};

//删除 
const tableRef = ref({ multipleSelection: []})

const selection = ref([])
// const selectionIds = computed(() => {
//   let ids: [] = []
//   tableRef.value.multipleSelection.forEach((item: any) => {
//     ids.push(item.id)
//   })
//   return ids
// })

const activDelete = (row: any, opr: any) => {
  let checkAllItem = []
  if(isSelectAll.value){
    checkAllItem = tableRef.value.multipleSelection
  }else{
    checkAllItem = allId.value
  }
  const selectionIds = ref([])
  checkAllItem.forEach((item: any) => {
    selectionIds.value.push(item.id)
  })
  if (opr == 'pitch') { // 批量删除 
    selection.value = selectionIds.value
  } else { //操作栏内删除
    selection.value = [row.id]
  }
  if(!selection.value.length) return ElMessage.warning('请选择要删除的箱子') 
  param.dialogVisible = true;
};
const handleDelete = () => {
  let ids = [...selection.value]
  deleteBox(ids).then((res: any) => {
    if(res.code == "00000"){
      ElMessage.success("删除成功！")
      getTableData()
    }else{
      ElMessage.warning(res.msg)
    }
    
  }).catch(error =>{
    ElMessage.error(error)
  })
  param.dialogVisible = false;
};

//轨迹
const showPath = async (row: any) => {
  param.containerNoo = row.containerNo
  param.dialogPathVisible = true;
};

const dialogAttachment = ref(false)
const attacType = ref(0) // 1-查看附件 2-上传附件
const attachmentFile = ref([])
const addBoxFileRef1 = ref()
const fileContainerId = ref()
// 上传附件
const attachFile = (row: any) => { 
  attacType.value = 2
  attachmentFile.value.length = 0
  dialogAttachment.value = true
  fileContainerId.value = row.id
};
//查看附件 
const viewAttach = (row: any) => { 
  attacType.value = 1
  attachmentFile.value = JSON.parse(row.fileList)
  dialogAttachment.value = true
  fileContainerId.value = row.id
};
// 更新集装箱附件
const submitAttac = () => { 
  if(fileContainerId.value){
    updateContainerFile(fileContainerId.value,{fileList:JSON.stringify(addBoxFileRef1.value.fileList)}).then((res:any) =>{ 
      if(res.code == '00000'){
        getTableData()
        ElMessage.success('附件更新成功');
        dialogAttachment.value = false
      }
  })
}
 
}; 
//详情
const showInfo = async (row: any) => {
  param.boxInfo = await getBoxDataInfo(row.id)
  param.dialogInfoVisible = true;
};

// 还箱
const handleOperateBox = () => {
  let checkAllItem = []
  if(isSelectAll.value){
    checkAllItem = tableRef.value.multipleSelection
  }else{
    checkAllItem = allId.value
  }

  const tableRefSelectList =  checkAllItem
  if (tableRefSelectList.length == 0) return ElMessage.warning('请选择要操作的箱子')
  const status35lits = tableRefSelectList.filter(item => item.status != 35);
  if(status35lits.length > 0) return ElMessage.warning('所选箱子存在非外加箱，请取消选择后再进行还箱')
  
  const returnCityIDist = []
  const returnCityNameList = []
  if (tableRefSelectList.length > 1) {
      tableRefSelectList.forEach(item => {
        if(!returnCityIDist.includes(item.returnCityId)){
          returnCityIDist.push(item.returnCityId)
          returnCityNameList.push(item.returnCityName)
        }
      })

      const returnCityNameListStr = returnCityNameList.join('、')
      if(returnCityIDist.length == 1){  
        param.dialogBoxVisible = true
      }else{
          ElMessageBox.confirm('您所选箱号的还箱城市不一致！有'+ returnCityNameListStr +'; 确定还到同一城市吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            param.dialogBoxVisible = true
          }).catch(() => { });
        }
  } else {
    batchContainerYardId.value = tableRefSelectList[0]?.boxEastYardId
    containerYardYardName.value = tableRefSelectList[0]?.yardName
    param.dialogBoxVisible = true
  }
  param.boxOutDate = new Date()
}

const batchContainerYardId = ref()
const containerYardYardName = ref('')
const batchContainer = (info:any) =>{
  batchContainerYardId.value = info[0]?.id
}
const handleSaveBox = () => {
  if (!batchContainerYardId.value) {
    return ElMessage.warning('请完善 实时位置')
  }
  if (!param.boxOutDate) {
    return ElMessage.warning('请完善 日期')
  }
  const data = {
    boxEastYardId: batchContainerYardId.value,
    returnDate: param.boxOutDate,
    containerIds: tableRef.value.multipleSelection.map((item: any) => item.id)
  }
  tableRef.value.clearCheckAll()
  returnContainer(data).then((res: any) => {
    param.dialogBoxVisible = false
    ElMessage.success('还箱成功')
    getTableData()
  })
};

// 转代管
const goManage = () =>{
  let checkAllItem = []
  if(isSelectAll.value){
    checkAllItem = tableRef.value.multipleSelection
  }else{
    checkAllItem = allId.value
  }
  const selectList =  checkAllItem
  if(!selectList.length) return ElMessage.warning("请先选择需要操作的集装箱！")
  const tempList = selectList.filter(item => (item.containerClassify == 15 && item.status == 40) || item.status == 45 )
  // if(selectList.length > tempList.length) return ElMessage.warning("只有代管箱且已还箱/结束代管状态下的集装箱才能进行此操作！")
  if(selectList.length > tempList.length) return ElMessage.warning("只有外调箱且已还箱和结束代管状态下的集装箱才能进行此操作！")

  const ids = tempList.map(item => item.id)
  let reqParams = {
    containerIds:ids
  }
  tableRef.value.clearCheckAll()
  toEscrowBox(reqParams).then(res =>{
    if(res.code == "00000"){
      ElMessage.warning("转代管操作成功！")
      getTableData()
    }else{
      console.log(res.msg)
    }
  }).catch(error =>{
    console.log("ERROR:",error)
  })

}
const dialogEscrow = ref(false)
 
const custodyBox = reactive([])
// 结束代管
const endManage = async() =>{
  let checkAllItem = []
  if(isSelectAll.value){
    checkAllItem = tableRef.value.multipleSelection
  }else{
    checkAllItem = allId.value
  }
  const selectEscrowList =  checkAllItem
  if(!selectEscrowList.length) return ElMessage.warning("请先选择需要操作的集装箱！")
  const tempList = selectEscrowList.filter(item => item.containerClassify == 10 && item.status == 5 )
  if(selectEscrowList.length > tempList.length) return ElMessage.warning("只有代管箱且在堆存状态下的集装箱才能进行此操作！")
  custodyBox.length = 0

  let ids = checkAllItem.map(item =>item.id)
  let yardFeesInfo = []
  await containerYardFees(ids).then(res=>{
    yardFeesInfo = res.data
  })

  selectEscrowList.forEach(item => {
    item.receivableLiftingFee = ""
    item.receivableLiftingFeeCurrency = "USD"
    item.receivableStorageFeePrice = ""
    item.receivableStorageFeePriceCurrency = "USD"
    item.paymentLiftingFee = ""
    item.paymentLiftingFeeCurrency = "USD"
    item.paymentStorageFeePrice = ""
    item.paymentStorageFeeCurrency = "USD"

    yardFeesInfo.forEach(item1 =>{
      if(item.containerNo == item1.containerNo){
          item.paymentLiftingFee = item1.paymentLiftingFee
          item.paymentLiftingFeeCurrency = item1.paymentLiftingFeeCurrency || 'USD'
          item.paymentStorageFeePrice = item1.paymentStorageFeePrice
          item.paymentStorageFeeCurrency = item1.paymentStorageFeeCurrency || 'USD'
      }
    })
    custodyBox.push(item)
  })
  isEscrow.value = 'jsdg'
  dialogEscrow.value = true
  tableRef.value.clearCheckAll()
}

// 确认提交结束代管数据
const submitCustody = ()=> {
  let reqParams = []
  custodyBox.forEach(item => {
    let params = {
      containerId:item.id,
      containerNo:item.containerNo,
      outDate:item.outDate,
      receivableLiftingFee:item.receivableLiftingFee,
      receivableLiftingFeeCurrency:item.receivableLiftingFeeCurrency,
      receivableStorageFeePrice:item.receivableStorageFeePrice,
      receivableStorageFeePriceCurrency:item.receivableStorageFeePriceCurrency,
      otherFeeList:item.otherFeeList,
      remark:item.remark
    }
    reqParams.push(params)
  })
 toEscrowEnd(reqParams).then(res =>{
    if(res.code == "00000"){
      ElMessage.warning("结束代管操作成功！")
      getTableData()
      dialogEscrow.value = false
    }else{
      console.log(res.msg)
    }
  }).catch(error =>{
    console.log("ERROR:",error)
  })
}

const dialogEscrowfees = ref(false)
const escrowfeesData = reactive({
  receivableLiftingFee:'',
  receivableLiftingFeeCurrency:"USD",
  receivableStorageFeePrice:'',
  receivableStorageFeePriceCurrency:'USD'
})

const escrowSelectionList = ref([])
// 选中的题目进行批量操作
const escrowSelectionChange= (selectVal:any) =>{
  escrowSelectionList.value = selectVal
}
// 批量填写代管费用明细
const openEscrowfeesdialog = () =>{
  if(!escrowSelectionList.value.length > 0) return  ElMessage.warning("至少要选择一条数据！")
  dialogEscrowfees.value = true
}
// 保存结束代管费用
const sureEscrowfees = ()=>{
  escrowSelectionList.value.forEach(item => {
    item.receivableLiftingFee = escrowfeesData.receivableLiftingFee
    item.receivableLiftingFeeCurrency = escrowfeesData.receivableLiftingFeeCurrency
    item.receivableStorageFeePrice = escrowfeesData.receivableStorageFeePrice
    item.receivableStorageFeePriceCurrency = escrowfeesData.receivableStorageFeePriceCurrency
  })
  dialogEscrowfees.value = false
}
// 重置结束代管费用
const restEscrowfees = ()=>{
  escrowfeesData.receivableLiftingFee = ""
  escrowfeesData.receivableLiftingFeeCurrency = "USD"
  escrowfeesData.receivableStorageFeePrice = ""
  escrowfeesData.receivableStorageFeePriceCurrency='USD'
}
const isEscrow = ref('jsdg') // 编辑额外费用 批量提箱（pltx）、结束代管(jsdg)、编辑自有箱额外费用(bjzyx) 同时用到  用于区分 true：结束代管  false：其他
// 操作栏编辑额外费用
const openEditEscrow = (valNo:any) =>{
  extraCostsContainerNo.value = valNo
  otherFeeList.splice(1)
  otherFeeList.map(item => item.containerNo = valNo)
  dialogExtraCosts.value = true
}
// 删除代管箱
const deleteEscrowItem = (valIndex)=>{
  if(custodyBox.length > 1){
    custodyBox.splice(valIndex, 1)
    tableKey.value = new Date()
  }else{
    ElMessage.warning("请保留一条数据")
  }
}

// 还箱城市
const backCityInfo = ref({})
const nationalTypeTx = ref(2) // 提箱国家类型 2：所有国家城市 1-只能搜索国内城市 0：只能搜索国外城市
const nationalTypeHx = ref(2) // 提箱国家类型 2：所有国家城市 1-只能搜索国内城市 0：只能搜索国外城市
const backCityId = (id: string,index: number,info: any) => {
  form.backCity = id
  console.log("1111111",id,info)
  // backCityInfo.value = info
}
const carryCityInfo = ref({})
//还箱城市
const carryCityId = (id: string,index: number,info: any) => {
  form.carryCity = id
  console.log("22222",id,info)
  // carryCityInfo.value = info
}

const backCityChange = (id: string, info: any) => {
  param.returnCityId = id
}
const carryCityChange = (id: string, info: any) => {
  param.carryCityId = id
}


const havePriceList = ref([])
//堆场id
const yardInfo = (id: string, info: any) => {
  havePriceList.value = []
  form.location = id
  if (info) { 
    form.yardName = info.yardName 
    havePriceList.value = info.priceList || []
  }
  if (form.location != '1') {
    form.containerClassify = '5'
  }
}

const yardChange = (id: string, info: any) => {
  param.boxEastYardId = id
  param.yardName = info.yardName
}

//天数
const dateChange = (str: any) => {
  if (str == 'zaiTu') {
    form.outDays = getInterValDays(form.outDate)
  }
  if (str == 'duiChang') {
    form.inDays = getInterValDays(form.inDate)
  }
}


//分页
function onTablePageChange(page: any) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  getTableData();
};


//
onMounted(() => {
  getTableData();
  const showTableItemStr = sessionStorage.getItem('showTableItem')
  if(sessionStorage.getItem('showTableItem')?.length && showTableItemStr){
    showTableItem.value =  JSON.parse(showTableItemStr)
  }else{
    showTableItem.value = ['containerNo','boxType','boxCondition','status','location','outBoxCompanyName',
'carryCityName','returnCityName','inDate','inDays','outDate','outDays','overDays','overdueDays','containerClassify','orderType',
'agentName','totalWeight','remark','operate']
  }
  handleGroupChange()
  
})

const rawData = ref([])
const dialogBatchPicking = ref(false)
const orderType = ref('20')
//批量提箱 
const tableKey = ref(new Date()) 
const batchCity = reactive({
  config:{
    multiple:false,
    disabled:false,
    collapsetags:false,
    isIcon:false
  }
})


let batchPickingData = reactive([{
  containerNo:"",
  businessNo:"", 
  containerClassify:'',
  boxType:5,
  boxCondition:5,
  yardName:'',
  boxUsagePeriod:1,
  overdueFeeDay:1,

  rentInPrice:'',
  rentInPriceCurrency:'CNY',
  rentOutPrice:'',
  rentOutPriceCurrency:'USD',
  receivableLiftingFee:'',
  receivableLiftingFeeCurrency:'USD',
  receivableStorageFeePrice:'',
  receivableStorageFeePriceCurrency:'USD',
  depreciationCharge:'',
  depreciationChargeCurrency:"USD",

  boxLabelPrice:'',
  boxLabelPriceCurrency:'',
  buyInPrice:'',
  buyInPriceCurrency:'',
  sellOutPrice:'',
  sellOutPriceCurrency:'',
  paymentLiftingFee:'',
  paymentLiftingFeeCurrency:'',
  paymentStorageFeePrice:'',
  paymentStorageFeeCurrency:'',

  outDate:'',
  returnCityId:'',
  outBoxCompanyName:'',
  agentName:'',
  remark:''
}])


const isSelectAll = ref(true) // true:显示全选按钮  false：显示取消全选按钮
const batchPicking = async()=>{//carryCountryId：1 国内堆场 其他值都是国外
  let checkAllItem = []
  if(isSelectAll.value){
    checkAllItem = tableRef.value.multipleSelection
  }else{
    checkAllItem = allId.value
  }

  if(!checkAllItem.length) return  ElMessage.warning('请选择集装箱')
  const showData = checkAllItem.filter(item => item.status != 5)
  if(showData.length) return  ElMessage.warning('请取消选中在途状态下的集装箱')
  batchPickingData.length = 0
  rawData.value.length = 0
  let ids = checkAllItem.map(item =>item.id)
  let yardFeesInfo = []
  await containerYardFees(ids).then(res=>{
    yardFeesInfo = res.data
  })
    
  checkAllItem.forEach(item =>{
    item.paymentLiftingFee = ''
    item.paymentLiftingFeeCurrency ='USD'
    item.paymentStorageFeePrice = ''
    item.paymentStorageFeeCurrency ='USD'

    item.businessNo =''
    item.rentInPrice =''
    item.rentInPriceCurrency ='USD'
    item.rentOutPrice =''
    item.rentOutPriceCurrency ='USD'
    item.receivableLiftingFee =''
    item.receivableLiftingFeeCurrency ='USD'
    item.receivableStorageFeePrice =''
    item.receivableStorageFeePriceCurrency ='USD'
    item.boxLabelPrice = '',
    item.boxLabelPriceCurrency='USD',
    item.buyInPrice = '',
    item.buyInPriceCurrency='USD',
    item.sellOutPrice='',
    item.sellOutPriceCurrency='USD',
    // item.depreciationCharge='',
    // item.depreciationChargeCurrency='USD',

    yardFeesInfo.forEach(item1 =>{
      if(item.containerNo == item1.containerNo){
        item.paymentLiftingFee = item1.paymentLiftingFee
        item.paymentLiftingFeeCurrency = item1.paymentLiftingFeeCurrency || 'USD'
        item.paymentStorageFeePrice = item1.paymentStorageFeePrice
        item.paymentStorageFeeCurrency = item1.paymentStorageFeeCurrency || 'USD'
      }
    })
    orderType.value = '20'
    batchPickingData.push(item)
    rawData.value.push(item)
    
  })
  isEscrow.value = 'pltx'
  dialogBatchPicking.value = true 
}

const orderTypeChange = (val:any)=>{
  batchPickingData.length = 0
  rawData.value.forEach(item =>{
    item.businessNo = ""
    item.boxUsagePeriod = 0
    item.buyInPrice = ""
    item.sellOutPrice = ""
    item.rentInPrice = ''
    item.rentOutPrice = ''
    item.overdueFeeDay = ''
    item.agentName = ''
    item.remark = ''
    // if(val == '5' && item.carryCountryId == "1"){  //出租 =》 出租箱只能是国内堆场集装箱
    //   batchPickingData.push(item)
    // }else if(val == '10' && item.carryCountryId != "1"){ //回调  =》回调业务只能是国外堆场的集装箱
    //   batchPickingData.push(item)
    // }else if(val == '20'){ //出售  => 出售业务不限制国内外堆场集装箱
    //   batchPickingData.push(item)
    // }
    if(val == '5'){  //出租 =》 出租箱只能是国内堆场集装箱
      batchPickingData.push(item)
    }else if(val == '10'){ //回调  =》回调业务只能是国外堆场的集装箱
      batchPickingData.push(item)
    }else if(val == '20'){ //出售  => 出售业务不限制国内外堆场集装箱
      batchPickingData.push(item)
    }
  })
}

const businessCity = (id: string,index:Number)=>{
  editData.returnCityId = id
}
const batchPickingCity = (id: string,index:Number) => {
  batchPickingData[index] = {
    ...batchPickingData[index],
    returnCityId: id
  };
}

const dialogEdit = ref(false)
const dialogBusiness = ref(false)
const dialogExtraCosts = ref(false)
const otherFeeList = reactive([{
  containerNo:'', //箱号
  feeCurrency:'USD',//费用币种
  feeCode:'5', //费用代码 5-修箱费 10-提箱费  15-翻箱费  20-其他费用
  feeName:'修箱费',//费用名称
  feeAmount:'',//费用金额
  feeDirection:'1',//结算流向(应收:1 应付:-1)
  feeFlag:'5',//结算公司标识:5-客户  10-堆场  15-第三方
  feeCompanyId:'',//结算公司Id
  feeCompanyName:''//结算公司名称

}])
const extraCostsFeeCurrency = ref(otherFeeList[0].feeCurrency) 

const extraCostsCurrency = ()=>{ //额外费用修改币种
  otherFeeList.forEach(item =>{
    item.feeCurrency = extraCostsFeeCurrency.value
  })
}
const changeFeeName = ()=>{  //根据费用代码 修改费用名称
  otherFeeList.forEach(item => {
    if(item.feeCode == "5"){
      item.feeName = "修箱费"
    }else if(item.feeCode == "10"){
      item.feeName = "提箱费"
    }else if(item.feeCode == "15"){
      item.feeName = "翻箱费"
    }else if(item.feeCode == "20"){
      item.feeName = "其他费用"
    }
  })
} 
const extraCostsContainerNo = ref()
const addItemExtraCosts = ()=>{ //添加一条额外费用明细
  if(otherFeeList.length > 19) return ElMessage.warning("最多只能添加20条费用信息!")
    const newItem = {
      containerNo:extraCostsContainerNo.value,
      feeCurrency:extraCostsFeeCurrency.value,//费用币种
      feeCode:'20', //费用代码 5-修箱费 10-提箱费  15-翻箱费  20-其他费用
      feeName:'其他费用',//费用名称
      feeAmount:'',//费用金额
      feeDirection:'1',//结算流向(应收:1 应付:-1)
      feeFlag:'5',//结算公司标识:5-客户  10-堆场  15-第三方
      feeCompanyId:'',//结算公司Id
      feeCompanyName:''//结算公司名称
    }
  otherFeeList.push(newItem)
}
const deleteItemExtraCosts = (valIndex) =>{ // 删除一条额外费用信息
  otherFeeList.splice(valIndex,1)
}

const storageCosts = reactive({})  // 编辑额外费用是 二次编辑基同一个集装箱 显示上次编辑额外费用信息
const openEiitExtraCosts = (containerNo:any,type:string)=>{ // 修改额外费用信息
  extraCostsContainerNo.value = containerNo
  isEscrow.value = type
  const item = {
    containerNo:extraCostsContainerNo.value, //箱号
    feeCurrency:extraCostsFeeCurrency.value,//费用币种
    feeCode:'5', //费用代码 5-修箱费 10-提箱费  15-翻箱费  20-其他费用
    feeName:'修箱费',//费用名称
    feeAmount:'',//费用金额
    feeDirection:'1',//结算流向(应收:1 应付:-1)
    feeFlag:'5',//结算公司标识:5-客户  10-堆场  15-第三方
    feeCompanyId:'',//结算公司Id
    feeCompanyName:''//结算公司名称
  }
  otherFeeList.splice(0)
  otherFeeList.push(item)
  // otherFeeList.splice(1)
  otherFeeList.map(item => item.containerNo = containerNo)
  if(storageCosts.hasOwnProperty(containerNo)){
    otherFeeList.splice(0)
    storageCosts[containerNo].forEach(item1 => {
      otherFeeList.push(item1)
    })
  }

  dialogExtraCosts.value = true
}
const restOtherFeeList = ()=>{
  const item = {
    containerNo:extraCostsContainerNo.value, //箱号
    feeCurrency:extraCostsFeeCurrency.value,//费用币种
    feeCode:'5', //费用代码 5-修箱费 10-提箱费  15-翻箱费  20-其他费用
    feeName:'修箱费',//费用名称
    feeAmount:'',//费用金额
    feeDirection:'1',//结算流向(应收:1 应付:-1)
    feeFlag:'5',//结算公司标识:5-客户  10-堆场  15-第三方
    feeCompanyId:'',//结算公司Id
    feeCompanyName:''//结算公司名称
  }
  otherFeeList.splice(0)
  otherFeeList.push(item)
  if(storageCosts.hasOwnProperty(extraCostsContainerNo.value)){
    storageCosts[extraCostsContainerNo.value].splice(0)
  }
}
const submitOtherFeeList = ()=>{
  changeFeeName()
  if(isEscrow.value == 'jsdg'){
    custodyBox.forEach(item =>{
      if(item.containerNo == extraCostsContainerNo.value){
        item.otherFeeList = otherFeeList
      }
    })
  }else if(isEscrow.value == 'pltx'){
    batchPickingData.forEach(item =>{
      if(item.containerNo == extraCostsContainerNo.value){
        item.otherFeeList = otherFeeList
        if(storageCosts.hasOwnProperty(item.containerNo)){
          storageCosts[item.containerNo].splice(0)
        }else{
          storageCosts[item.containerNo] = []
        }
        otherFeeList.forEach(item => {
          storageCosts[item.containerNo].push(item)
        })
      }
    })
  }else if(isEscrow.value == 'bjzyx'){
    let data = {
      businessNo:zyxbusinessNo.value,
      otherFeeList:otherFeeList
    }
    addContainerOtherFee(containerNoId.value,data).then((res:any) => {
      if(res.code == '00000'){
          ElMessage.success(`${otherFeeList[0].containerNo}额外费用添加成功`)
      }else{
        ElMessage.warning(`${otherFeeList[0].containerNo}额外费用添加失败`)
      }
    }).catch((error:any) => {
      ElMessage.error(error)
    })
  }
  dialogExtraCosts.value = false
}
const containerNoId = ref('') //集装箱id
const zyxbusinessNo = ref('') //自有箱编辑额外费用 新增业务编号
// 集装箱编辑额外费用
const additionalFee = (row:any) => {
  containerNoId.value = row.id
  openEiitExtraCosts(row.containerNo,'bjzyx')
}

// 编辑集装箱 自有箱-> 额外费用
// const ownBoxAdditionalFee = (containerNo:any) =>{

//   dialogExtraCosts.value = true
// }
const openBusinessInfo = ()=>{ //修改业务信息
  if(!batchSelectionChangeInfo.value.length) return ElMessage.warning('至少要选择一条数据')
  dialogBusiness.value = true 
}


const openEditData = ()=> { //修改费用信息
  if(!batchSelectionChangeInfo.value.length) return ElMessage.warning('至少要选择一条数据') 
  dialogEdit.value = true 
}
const editData = reactive({
  businessNo:'',
  rentInPrice:'',
  rentInPriceCurrency:'USD',
  rentOutPrice:'',
  rentOutPriceCurrency:'USD',
  receivableLiftingFee:'',
  receivableLiftingFeeCurrency:'USD',
  receivableStorageFeePrice:'',
  receivableStorageFeePriceCurrency:'USD',
  boxLabelPrice:'',
  boxLabelPriceCurrency:'USD',
  buyInPrice:'',
  buyInPriceCurrency:'USD',
  sellOutPrice:'',
  sellOutPriceCurrency:'USD',

  boxUsagePeriod:'',
  overdueFeeDay:'',
  outDate:'',
  returnCityId:'',
  agentName:'',
  remark:''
})
const editRuler = {
  ...validationRules.containerRules3
}
const validateInternationalText =(value)=> {
      // 主要语言的Unicode范围：
      // 中文: \u4e00-\u9fa5
      // 日文: \u3040-\u309F（平假名）, \u30A0-\u30FF（片假名）, \u4e00-\u9faf（汉字）
      // 韩文: \uAC00-\uD7AF
      // 西文（拉丁）: \u00C0-\u00FF（带重音）, \u0100-\u017F（扩展拉丁）
      // 俄文: \u0400-\u04FF
      // 希腊文: \u0370-\u03FF
      // 阿拉伯文: \u0600-\u06FF
      // 希伯来文: \u0590-\u05FF
      // 泰文: \u0E00-\u0E7F
      const internationalRegex = /^[\u4e00-\u9fa5\u3040-\u309F\u30A0-\u30FF\uAC00-\uD7AF\u00C0-\u00FF\u0100-\u017F\u0400-\u04FF\u0370-\u03FF\u0600-\u06FF\u0590-\u05FF\u0E00-\u0E7F\s]+$/;
      return internationalRegex.test(value);
  }

const containsEmoji = (text)=> {
    const emojiRegex = /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{FE00}-\u{FE0F}]/gu;
    return emojiRegex.test(text);
}

    // 检查是否包含换行符
const containsNewlines = (text) => {
    return /[\r\n]/.test(text);
}

const batchSelectionChangeInfo = ref([])
const batchSelectionChange = (newSelection:any[]) =>{ // 批量提箱选中去修改
  batchSelectionChangeInfo.value = newSelection
}
const restCostinfo = ()=> { //重置批量填写费用信息
  editData.businessNo = ''
  editData.receivableLiftingFee = ''
  editData.receivableLiftingFeeCurrency = 'USD'
  editData.receivableStorageFeePrice = ''
  editData.receivableStorageFeePriceCurrency = 'USD'
  if(orderType.value == "5"){
    editData.rentInPrice = ''
    editData.rentInPriceCurrency = 'USD'
    editData.rentOutPrice = ''
    editData.rentOutPriceCurrency = 'USD'
  }else if(orderType.value == "10"){
    editData.boxLabelPrice = ''
    editData.boxLabelPriceCurrency = 'USD'
  }else if(orderType.value == "20"){
    editData.buyInPrice = ''
    editData.buyInPriceCurrency = 'USD'
    editData.sellOutPrice = ''
    editData.sellOutPriceCurrency = 'USD'
  }
}
const toEditData = () =>{ // 批量修改填写费用明细
  batchSelectionChangeInfo.value.forEach(item =>{
    item.businessNo = editData.businessNo
    item.receivableLiftingFee = editData.receivableLiftingFee
    item.receivableLiftingFeeCurrency = editData.receivableLiftingFeeCurrency
    item.receivableStorageFeePrice = editData.receivableStorageFeePrice
    item.receivableStorageFeePriceCurrency = editData.receivableStorageFeePriceCurrency

    if(orderType.value == "5"){
      item.rentInPrice = editData.rentInPrice
      item.rentInPriceCurrency = editData.rentInPriceCurrency
      item.rentOutPrice = editData.rentOutPrice
      item.rentOutPriceCurrency = editData.rentOutPriceCurrency
    }else if(orderType.value == "10"){
      item.boxLabelPrice = editData.boxLabelPrice
      item.boxLabelPriceCurrency = editData.boxLabelPriceCurrency
    }else if(orderType.value == "20"){
      item.buyInPrice = editData.buyInPrice
      item.buyInPriceCurrency = editData.buyInPriceCurrency
      item.sellOutPrice = editData.sellOutPrice
      item.sellOutPriceCurrency = editData.sellOutPriceCurrency
    }
    
  })
  cancelEditData()
}
//关闭弹框
const cancelEditData=()=>{
  editDataRef.value.resetFields()// 重置数据
   editData.businessNo = ''
  editData.rentInPrice = ''
  editData.rentOutPrice = ''
  editData.receivableLiftingFee = ''
  editData.receivableStorageFeePrice = ''
  editData.boxLabelPrice = ''
  editData.buyInPrice = ''
  editData.sellOutPrice =''
  editData.boxUsagePeriod = ''
  editData.overdueFeeDay = ''
  editData.outDate = ''
  editData.returnCityId = ''
  editData.agentName = ''
  editData.remark = ''
  dialogEdit.value = false
}
const restBusinessInfo = ()=>{ ////重置批量填写费用信息
  if(orderType.value == '20'){
    editData.returnCityId = ''
    editData.agentName = ''
    editData.remark = ''
  }else{
    editData.boxUsagePeriod = ''
    editData.overdueFeeDay = ''
    editData.outDate = ''
    editData.returnCityId = ''
    editData.agentName = ''
    editData.remark = ''
  }

}
const toEditBusiness = () =>{ //批量修改业务信息
  batchSelectionChangeInfo.value.forEach(item =>{
    if(orderType.value == '20'){
      item.outDate = editData.outDate
      // item.returnCityId = editData.returnCityId
      item.agentName = editData.agentName
      item.remark = editData.remark
    }else{
      item.boxUsagePeriod = editData.boxUsagePeriod
      item.overdueFeeDay = editData.overdueFeeDay
      item.outDate = editData.outDate
      item.returnCityId = editData.returnCityId
      item.agentName = editData.agentName
      item.remark = editData.remark
    }
    
  })
  cancelEditData()
  dialogBusiness.value = false
}
const submitContainerPickup = (orderType:string) =>{
  //  orderType  5-出租箱业务 10-回调箱业务 20-出售箱 25-购箱
  let reqParam = []
  if(orderType == '5'){ //出租箱业务
    batchPickingData.forEach(item => {
      let newItem = {
        orderType:'5',
        containerId: item?.id,
        containerNo: item.containerNo,
        businessNo: item.businessNo,
        containerClassify:item.containerClassify,
        boxType:item.boxType,
        boxCondition:item.boxCondition,
        yardName:item.yardName,

        boxUsagePeriod:item.boxUsagePeriod,
        overdueFeeDay:item.overdueFeeDay,
        rentInPrice:item.rentInPrice || 0,
        rentInPriceCurrency:item.rentInPriceCurrency,
        rentOutPrice:item.rentOutPrice || 0,
        rentOutPriceCurrency:item.rentOutPriceCurrency,

        receivableLiftingFee:item.receivableLiftingFee || 0,
        receivableLiftingFeeCurrency:item.receivableLiftingFeeCurrency,
        receivableStorageFeePrice:item.receivableStorageFeePrice || 0,
        receivableStorageFeePriceCurrency:item.receivableStorageFeePriceCurrency,
        paymentLiftingFee:item.paymentLiftingFee || 0,
        paymentLiftingFeeCurrency:item.paymentLiftingFeeCurrency,
        paymentStorageFeePrice:item.paymentStorageFeePrice || 0,
        paymentStorageFeeCurrency:item.paymentStorageFeeCurrency,
        outDate:item.outDate,
        returnCityId:item.returnCityId,
        outBoxCompanyName:item.outBoxCompanyName,
        agentName:item.agentName,
        remark:item.remark,
        otherFeeList:item.otherFeeList,
        rentOutDirection:item.rentOutDirection || null
        // depreciationCharge:item.depreciationCharge  || 0,
        // depreciationChargeCurrency:item.depreciationChargeCurrency || 'USD'

      }
      reqParam.push(newItem)
    })
  }else if(orderType == '10'){ //回调箱业务
    batchPickingData.forEach(item => {
      let newItem = {
        orderType:'10',
        containerId: item?.id,
        containerNo: item.containerNo,
        businessNo: item.businessNo,
        containerClassify:item.containerClassify,
        boxType:item.boxType,
        boxCondition:item.boxCondition,
        yardName:item.yardName,

        boxUsagePeriod:item.boxUsagePeriod,
        overdueFeeDay:item.overdueFeeDay,
        boxLabelPrice:item.boxLabelPrice || 0,
        boxLabelPriceCurrency:item.boxLabelPriceCurrency,

        receivableLiftingFee:item.receivableLiftingFee || 0,
        receivableLiftingFeeCurrency:item.receivableLiftingFeeCurrency,
        receivableStorageFeePrice:item.receivableStorageFeePrice || 0,
        receivableStorageFeePriceCurrency:item.receivableStorageFeePriceCurrency,
        paymentLiftingFee:item.paymentLiftingFee || 0,
        paymentLiftingFeeCurrency:item.paymentLiftingFeeCurrency,
        paymentStorageFeePrice:item.paymentStorageFeePrice || 0,
        paymentStorageFeeCurrency:item.paymentStorageFeeCurrency,
        outDate:item.outDate,
        returnCityId:item.returnCityId,
        outBoxCompanyName:item.outBoxCompanyName,
        agentName:item.agentName,
        remark:item.remark,
        otherFeeList:item.otherFeeList,
        // depreciationCharge:item.depreciationCharge || 0,
        // depreciationChargeCurrency:item.depreciationChargeCurrency || 'USD'

      }
      reqParam.push(newItem)
    })

  }else if(orderType == '20'){ //出售箱
    batchPickingData.forEach(item => {
      let newItem = {
        orderType:'20',
        containerId: item?.id,
        containerNo: item.containerNo,
        businessNo: item.businessNo,
        containerClassify:item.containerClassify,
        boxType:item.boxType,
        boxCondition:item.boxCondition || 0,
        yardName:item.yardName,

        buyInPrice:item.buyInPrice,
        buyInPriceCurrency:item.buyInPriceCurrency,
        sellOutPrice:item.sellOutPrice || 0,
        sellOutPriceCurrency:item.sellOutPriceCurrency,

        receivableLiftingFee:item.receivableLiftingFee || 0,
        receivableLiftingFeeCurrency:item.receivableLiftingFeeCurrency,
        receivableStorageFeePrice:item.receivableStorageFeePrice || 0,
        receivableStorageFeePriceCurrency:item.receivableStorageFeePriceCurrency,
        paymentLiftingFee:item.paymentLiftingFee || 0,
        paymentLiftingFeeCurrency:item.paymentLiftingFeeCurrency,
        paymentStorageFeePrice:item.paymentStorageFeePrice || 0,
        paymentStorageFeeCurrency:item.paymentStorageFeeCurrency,
        outDate:item.outDate,
        returnCityId:item.returnCityId,
        outBoxCompanyName:item.outBoxCompanyName,
        agentName:item.agentName,
        remark:item.remark,
        otherFeeList:item.otherFeeList
      }
      reqParam.push(newItem)
    })

  }
// console.log("ingData11111",batchPickingData)
//   console.log("reqParam",reqParam)
  tableRef.value.clearCheckAll()
  batchCarryBox(reqParam).then(res =>{
    if(res.code == '00000'){
      dialogBatchPicking.value = false
      getTableData()
    }else{
      ElMessage.warning(res.msg)
    }
  
  }).catch(error =>{
    console.log("ERROR:"+ error)
  })
}

const deleteItem = (valIndex:Number)=>{ // 批量提箱时 删除行
    if(batchPickingData.length > 1){
      batchPickingData.splice(valIndex, 1)
      tableKey.value = new Date()
    }else{
      ElMessage.warning("请保留一条数据")
    }

  }

// 只允许输入数字和最多一位小数点，且小数部分不超过2位
const handleFeeInput = (value: string, item: any) => {
  const regex = /^(\d+)(\.\d{0,2})?$/;
  const cleanedValue = value.replace(/[^0-9.]/g, ''); // 移除非数字和非小数点字符

  if (regex.test(cleanedValue)) {
    item.feeAmount = cleanedValue;
  } else {
    // 如果不符合规则，则不更新值
    item.feeAmount = value.slice(0, -1);
  }
};

const isFutureDate = (date: Date) => {  //日期选择 只能选择小于当前日期的时间
  const today = new Date()
  // 设置为 true 表示禁用该日期
  return date > today
}

//集装箱导出
const toExportContainer = ()=>{
  let checkAllItem = []
  if(isSelectAll.value){
    checkAllItem = tableRef.value.multipleSelection
  }else{
    checkAllItem = allId.value
  }


  const ids = checkAllItem.map((item: any) => item.id)
  if (ids.length < 1) return ElMessage.warning('请选择要导出的箱号！')
  ElMessageBox.confirm('确认要导出选中的集装箱', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      let reqParameters = {
        containerInfoIds: ids
        }
        tableRef.value.clearCheckAll()
        exportContainer(reqParameters).then((res: any) => {
            downloadFile(res, '集装箱详情') 
        }).catch((error) => {
            ElMessage.error(error)
        })
    }).catch(() => { });
}

const disabledDate = (time1:Date,time2:Date)=>{
  // time1选择日期  time2 进场日期
  const today = new Date()
  const timeISOS1 = new Date(time1).toISOString();
  const date = new Date(time2);
  date.setDate(date.getDate() - 1)
  const timeISOS2 = date.toISOString();

  const todayISOS2 = new Date(today).toISOString();

  return (timeISOS1 > todayISOS2) ||  (timeISOS1 < timeISOS2)
 
}
const disabledDatezaiTu = (time) => {
  return time.getTime() > Date.now()
}

const disabledDateSell = (time) => {
  //  在途 大于等于 离场日期  小于等于 今天 selloutdate.value
  //  堆场中 大于等于 进场日期  小于等于 今天 sellIndate.value
  // selllocation
  let isChecktime1 = true
  if(selllocation.value =="在途"){
    if(selloutdate.value){
      isChecktime1 = time.getTime() < new Date(selloutdate.value).getTime()
    }
  }else{
    if(sellIndate.value){
      isChecktime1 = time.getTime() < new Date(sellIndate.value).getTime()
    }
  }
  
  
  let isChecktime2 = time.getTime() > Date.now()
  return isChecktime2 || isChecktime1 
  // return isChecktime1 || isChecktime2
}

// 修改还箱城市
const editReturnCityId = (val:any) =>{
  editContainer.value.returnCityId = val
}

// 修改提箱城市
const editCarryCityId = (val:any) =>{
  editContainer.value.carryCityId = val
}

const formatterNumber = (value:any) =>{ 
  const val = value.replace(/[^\d.]/g, '').replace(/(\.\d*)\./g, '$1').replace(/^(\d{5})\d+/, '$1').replace(/\.(\d{2})\d+/, '.$1')
  if (val.indexOf('.') === -1) {
    return (val- 0)
  }else {
    const valArr = val.split('.')
    return (valArr[0] - 0).toString() + '.' + valArr[1]
  }
}

const inputText = (value:any) =>{
  return value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\s]/g, '')
}

// const handleInput = (value) => {
//       // 正则说明：
//       // [^\u4e00-\u9fa5a-zA-Z0-9\s] 匹配非中文、英文、数字、空格的字符
//       this.inputValue = value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\s]/g, '');
//     }

const handleClose = ()=>{
  getTableData()
}



const allId = ref([]) // 使用全选功能时使用
const isAllCheck = ref(false) //是否使用全选功能
const checkAll = ref([]) //点击全选按钮时 选中列表所有内容（包含当前页和所有后续页）

const disableHeaderCheckbox = ref(false) // true:禁用表头全选/全取消 选择框 false:开启 表头全选/全取消 选择框
const slectAll = async(val:any) =>{
    checkAll.value = []
    await getTable({ pageNum:1,pageSize:10000}).then(res =>{ 
      if(res.code == "00000" && res.data.list && res.data.total){
        isSelectAll.value = false
        disableHeaderCheckbox.value = true
        res.data.list.forEach(item => {
          checkAll.value.push(item)
        })
        isAllCheck.value = true
        allId.value = checkAll.value
        tableRef.value.checkAll()
      }else{
        ElMessage.error("全选失败，请刷新页面，或者手动选择")
      }
 })
}
const deselectAll = () =>{
  allId.value = []
  disableHeaderCheckbox.value = false
  tableRef.value.clearCheckAll()
  isSelectAll.value = true
}

const updateSelectAll = (val) => {
  allId.value = val
  // console.log("11111",allId.value)
}

// 表格数据排序
const sortChange = (row:any) =>{ 
  sortBeans.value.length = 0
  sortBeans.value.push(row)
  getTableData()
}
</script>

<style lang="scss" scoped>
.form-inline{
    margin-top: 20px;
    .line-content {
        width: 200px;
    }
}
.dialogBatchPicking,
.editDataInfo{
  :deep(.el-input__wrapper) {
      box-shadow: none !important;
      // height: 30px;
      // border-radius: 0;
  }
  :deep(.el-select__wrapper) {
      box-shadow: none !important;
      // height: 30px;
      // border-radius: 0;
  }
  .elRow{
    border: 1px solid #ddd;
    border-radius: 3px;
  }
  .elInput{
    border: 1px solid #ddd;
    border-radius: 3px;
  }
}
.feeListHeader{
  height: 40px;
  line-height: 40px;
  background-color: #e9ebe5;
  text-align: center;
  font-weight: 550;
}
.feeListContent{
  padding: 10px 0;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.otherFeeList{
  .elSelect{
    :deep(.el-select__wrapper) {
        box-shadow: none !important;
        // height: 30px;
        // border-radius: 0;
    }

  }
}
.operatingArea{
  float: left;
  margin-left: 10px;
}


// 为折叠面板图标添加样式
:deep(.el-collapse-item__header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-ele {
  flex-shrink: 0;
  padding-right: 15px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
</style>
